Ví dụ tag input HTML5

INPUT

Input dạng color (mới)

<input type="color" name="" />

Trình duyệt hiển thị dạng bảng màu, giúp cho việc lựa chọn màu thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng date (mới)

<input type="date" name="" />

Trình duyệt hiển thị dạng bảng ngày tháng, giúp cho việc lựa chọn ngày tháng thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng datetime (mới)

<input type="datetime" name="" />

Trình duyệt hiển thị dạng ngày tháng, giúp cho việc lựa chọn ngày tháng thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng datetime-local (mới)

<input type="datetime-local" name="" />

Trình duyệt hiển thị dạng ngày tháng theo vùng, giúp cho việc lựa chọn ngày tháng theo vùng thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng email (mới)

<input type="email" name="" />

Dạng email giúp cho trình duyệt hiểu đúng dạng nhập vào là email, dạng này được hỗ trợ đa số các trình duyệt.

Input dạng month (mới)

<input type="email" name="" />

Trình duyệt hiển thị dạng tháng, giúp cho việc lựa chọn tháng thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng number (mới)

<input type="number" name="" min="3" max="10" step="" />

thuộc tính min, max và step không bắt buộc.

Trình duyệt hiển thị dạng số, giúp cho việc xác định số thuận tiện và chính xác hơn.
Dạng number được hỗ trợ phần lớn các trình duyệt, click xem trình duyệt hỗ trợ.

Input dạng range (mới)

<input type="range" name="" min="3" max="10" step="" />

thuộc tính min, max và step cần phải có.

Trình duyệt hiển thị dạng dãy số, giúp cho việc xác định số thuận tiện và chính xác hơn.
Dạng range được hỗ trợ phần lớn các trình duyệt, click xem trình duyệt hỗ trợ.

Input dạng search (mới)

<input type="search" name="" />

thuộc tính min, max và step cần phải có.

Giúp cho trình duyệt hiểu trường nhập vào được sử dụng cho truy vấn tìm kiếm.
Dạng range được hỗ trợ trong đa số các trình duyệt, click xem trình duyệt hỗ trợ.

Input dạng tell (mới)

<input type="tell" name="" />

Giúp cho trình duyệt hiểu trường nhập vào có kiểu số điện thoại.
Dạng tell được hỗ trợ trong đa số các trình duyệt, click xem trình duyệt hỗ trợ.

Input dạng time (mới)

<input type="time" name="" />

Trình duyệt hiển thị dạng thời gian, giúp cho việc lựa chọn thời gian thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input dạng url (mới)

<input type="url" name="" />

Giúp cho trình duyệt hiểu trường nhập vào có kiểu là một url.
Dạng url được hỗ trợ trong đa số các trình duyệt, click xem trình duyệt hỗ trợ.

Input dạng week (mới)

<input type="week" name="" />

Trình duyệt hiển thị dạng tuần, giúp cho việc lựa chọn các tuần thuận tiện và chính xác hơn.
Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input với thuộc tính max (mới)

<input type="number" name="" max="10" />

<input type="date" name="" max="2012-12-31" />

Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input với thuộc tính min (mới)

<input type="number" name="" min="5" />

<input type="date" name="" min="1970-01-01" />

Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input kết hợp 2 thuộc tính min và max (mới)

<input type="number" name="" min="5" min="10" />

<input type="date" name="" min="1970-01-01" min="2012-12-31" />

Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input với thuộc tính autofocus (mới)

<input type="text" name="" autofocus="autofocus" />

Click xem trình duyệt hỗ trợ.

Input với thuộc tính placeholder (mới)

<input type="text" name="" placeholder="Click vào đây để xem kết quả" />

Click xem trình duyệt hỗ trợ.

Input với thuộc tính required (mới)

<form action="confirm.php">
<input type="text" name="" required="required" /><input type="submit" name="" />
</form>

Click xem trình duyệt hỗ trợ.

Input với thuộc tính step (mới)

<input type="number" name="" step="5" />

Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Input kết hợp với tag <datalist> (mới)

Xác định giá trị các thành phần <input /> có thể có (tương tự như <select> - <option>).

<input list="html" />
<datalist id="html">
<option value="Học HTML"></option>
<option value="Tham khảo HTML"></option>
<option value="Ví dụ HTML"></option>
<option value="Thực hành HTML"></option>
</datalist>

Hiện nay chỉ có một số ít trình duyệt hỗ trợ, click xem trình duyệt hỗ trợ.

Double click vô input để xem kết quả.

Input dạng text

<input type="text" name="" value="" size="30" />

Sử dụng để nhập giá trị text.

Input dạng text - sử dụng maxlength

<input type="text" name="" value="" size="30" maxlength="20" />

Xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password.

Input dạng text - sử dụng readonly

<input type="text" name="" value="" size="30" readonly="readonly" />

Sử dụng khi giá trị text chỉ dùng để đọc, không được thay đổi.

Input dạng password

<input type="password" name="" value="" size="30" />

Text hiển thị bên trong dưới dạng password.

<input type="password" name="" value="myPasssword" size="30" />

Input dạng hidden

<input type="hidden" name="" value="" size="30" />

Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.

Input dạng checkbox

<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />

Được sử dụng cho nhiều lựa chọn khác nhau.


Input dạng checkbox - sử dụng checked

<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />

Được sử dụng cho nhiều lựa chọn khác nhau.


Input dạng checkbox - sử dụng disabled

<input type="checkbox" name="" value="" disabled="disabled" />
<input type="checkbox" name="" value="" />

Dạng này không cho click hay tác động tới input.
Được sử dụng khi không muốn dữ liệu bị thay đổi.


Input dạng radio

<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value="" />

Được sử dụng cho một chọn lựa duy nhất.
Các <input /> phải cùng "name", nếu không sẽ không chọn được.


Input dạng radio - sử dụng checked

<input type="radio" name="checkbox" value="" checked="checked" />
<input type="radio" name="checkbox" value="" />

Được sử dụng cho một chọn lựa mặc định.


Input dạng radio - sử dụng disabled

<input type="radio" name="checkbox" value="" disabled="disabled" />
<input type="radio" name="checkbox" value="" />

Dạng này không cho click hay tác động tới input.
Được sử dụng khi không muốn dữ liệu bị thay đổi.


Input dạng button

<input type="button" name="" value="Click" />

Sử dụng như một nút nhấn.

Input dạng button reset

<input type="reset" name="" value="Reset" />

Dùng để reset lại giá trị trong <form>.

Input dạng button submit

<input type="submit" name="" value="Submit" />

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

Input dạng button image

<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />

Sử dụng như một nút nhấn bằng hình.

Input dạng file upload

<input type="file" name="" />

Sử dụng để upload file.