Các kiểu nhập HTML

Kiểu nhập vào văn bản

<input type = “text”> định nghĩa một trường nhập văn bản trên một dòng:

<form>
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>
</form>

Kiểu nhập vào password

<input type = “password”> định nghĩa một trường mật khẩu:

<form>
User name:<br>
<input type=”text” name=”username”><br>
User password:<br>
<input type=”password” name=”psw”>
</form>

Các ký tự trong trường mật khẩu được ẩn đi (được hiển thị dưới dạng dấu hoa thị hoặc hình tròn).

Kiểu nhập vào submit

<input type = “submit”> định nghĩa một nút để gửi dữ liệu mẫu tới một trình xử lý mẫu. Trình xử lý mẫu thường là một máy chủ với tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>

Nếu bạn bỏ qua giá trị thuộc tính nút submit, nút sẽ nhận được văn bản mặc định:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit”>
</form>

Kiểu nhập vào reset

<input type = “reset”> xác định một reset button sẽ đặt lại tất cả các giá trị mẫu cho các giá trị mặc định của chúng:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
<input type=”reset”>
</form>

Kiểu nhập vào radio

<input type = “radio”> định nghĩa một nút radio. Các nút radio cho phép người dùng chọn chỉ một trong một số lựa chọn được ra:

<form>
<input type=”radio” name=”gender” value=”male” checked> Male<br>
<input type=”radio” name=”gender” value=”female”> Female<br>
<input type=”radio” name=”gender” value=”other”> Other
</form>

Kiểu nhập vào checkbox

<input type = “checkbox”> định nghĩa một hộp checkbox. Checkbox cho phép người dùng không chọn hoặc chọn nhiều các tùy chọn được đưa ra:

<form>
<input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car
</form>

Kiểu nhập vào button

<input type = “button”> định nghĩa một nút:

<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>

Các kiểu nhập vào trong HTML5

HTML5 đã thêm một số kiểu nhập liệu mới:

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Các loại nhập mới không được các trình duyệt web cũ hỗ trợ sẽ hoạt động như <input type = “text”>.

Kiểu nhập vào color

<input type = “color”> được sử dụng cho các trường đầu vào chứa màu sắc. Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn màu sắc có thể hiển thị trong trường nhập:

<form>
Select your favorite color:
<input type=”color” name=”favcolor”>
</form>

Kiểu nhập vào date

<input type = “date”> được sử dụng cho các trường đầu vào chứa ngày tháng. Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn ngày có thể hiển thị trong trường nhập:

<form>
Birthday:
<input type=”date” name=”bday”>
</form>

Bạn cũng có thể thêm các giới hạn cho ngày tháng:

<form>
Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″><br>
Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″><br>
</form>

Kiểu nhập vào datetime-local

<input type = “datetime-local”> chỉ định trường nhập ngày và thời gian, không có múi giờ. Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn ngày có thể hiển thị trong trường nhập:

<form>
Birthday (date and time):
<input type=”datetime-local” name=”bdaytime”>
</form>

Kiểu nhập vào email

<input type = “email”> được sử dụng cho các trường đầu vào chứa địa chỉ email. Tùy thuộc vào trình duyệt hỗ trợ, địa chỉ e-mail có thể được tự động xác nhận khi gửi đi.

Một số điện thoại thông minh nhận dạng loại email và thêm “.com” vào bàn phím để khớp với nhập email.

<form>
E-mail:
<input type=”email” name=”email”>
</form>

Kiểu nhập vào month

<input type = “month”> cho phép người dùng chọn một tháng và năm. Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn ngày có thể hiển thị trong trường nhập.

<form>
Birthday (month and year):
<input type=”month” name=”bdaymonth”>
</form>

Kiểu nhập vào number

<input type = “number”> định nghĩa một trường nhập số. Bạn cũng có thể đặt những hạn chế về loại số được chấp nhận. Ví dụ sau hiển thị trường nhập số, nơi bạn có thể nhập một giá trị từ 1 đến 5:

<form>
Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>
</form>

Kiểu nhập vào giới hạn

Dưới đây là danh sách một số hạn chế đầu vào phổ biến (dấu (*) là những tính năng mới trong HTML5):

Ví dụ sau hiển thị trường nhập số, bạn có thể nhập một giá trị từ 0 đến 100, theo bước 10. Giá trị mặc định là 30:

<form>
Quantity:
<input type=”number” name=”points” min=”0″ max=”100″ step=”10″ value=”30″>
</form>

Kiểu nhập vào range

<input type = “range”> định nghĩa một điều khiển để nhập số có giá trị chính xác không quan trọng (như một điều khiển thanh trượt). Phạm vi mặc định là từ 0 đến 100. Tuy nhiên, bạn có thể đặt các giới hạn về những gì được chấp nhận với các thuộc tính min, max và step:

<form>
<input type=”range” name=”points” min=”0″ max=”10″>
</form>

Kiểu nhập vào search

<input type=”search”> được sử dụng cho các trường tìm kiếm (trường tìm kiếm hoạt động như một trường văn bản thông thường).

<form>
Search Google:
<input type=”search” name=”googlesearch”>
</form>

Kiểu nhập vào tel

<input type = “tel”> được sử dụng cho các trường nhập vào chứa số điện thoại. Kiểu số điện thoại hiện chỉ được hỗ trợ trong Safari 8.

<form>
Telephone:
<input type=”tel” name=”usrtel”>
</form>

Kiểu nhập vào time

<input type = “time”> cho phép người dùng chọn thời gian (không có múi giờ). Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn thời gian có thể hiển thị trong trường nhập.

<form>
Select a time:
<input type=”time” name=”usr_time”>
</form>

Kiểu nhập vào url

<Input type = “url”> được sử dụng cho trường nhập vào chứa địa chỉ URL. Tùy thuộc vào hỗ trợ trình duyệt, trường url có thể được tự động xác nhận khi gửi.

Một số điện thoại thông minh nhận dạng loại url, và thêm “.com” vào bàn phím để khớp với đầu vào url.

<form>
Add your homepage:
<input type=”url” name=”homepage”>
</form>

Kiểu nhập vào week

<input type = “week”> cho phép người dùng chọn một tuần và năm. Tùy thuộc vào trình duyệt hỗ trợ, một bộ chọn ngày có thể hiển thị trong trường nhập.

<form>
Select a week:
<input type=”week” name=”week_year”>
</form>

Loại thuộc tính nhập vào trong HTML