cá thẻ Ví dụ tag form HTML5

( Khởi nghiệp với Internet)

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 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.

BUTTON

<button type="button">Click me!</button>

<button type="button" disabled="disabled">Disabled</button>

<button type="button" name="tênButton">Name</button>

<button type="reset">Reset</button>

<button type="submit">Submit</button>

<button type="button" value="Gửi">Value</button>

LABEL

Label - input dạng text

<label for="email">Email</label>: <input type="text" id="email" name="email" size="30" />

Hãy click vào nhãn Email để hiểu rõ hơn.

Email: 

Label - input dạng checkbox

<label for="label01">Nhãn 01</label>: <input type="checkbox" id="label01" name="label01" value="" /><br />
<label for="label02">Nhãn 02</label>: <input type="checkbox" id="label02" name="label02" value="" />

Hãy click vào nhãn 01 và 02 để hiểu rõ hơn.

Nhãn 01: 
Nhãn 02: 

Label - input dạng radio

<label for="male">Nam</label>: <input type="radio" id="male" name="sex" value="" />
<br />
<label for="female">Nữ</label>: <input type="radio" id="female" name="sex" value="" />

Hãy click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 <input /> phải như nhau).

Nam: 
Nữ: 

TEXTAREA

rows - cols

<textarea rows="5" cols="20">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

disabled

<textarea rows="5" cols="20" disabled="disabled">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

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.

readonly

<textarea rows="5" cols="20" readonly="readonly">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

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

SELECT - OPTION

select - option

<select>
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

select - sử dụng name

<select name="TenDanhSach">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

select - sử dụng disabled

<select disabled="disabled">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định danh sách thả xuống không hiển thị.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

select - sử dụng multiple

<select multiple="multiple">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Hiển thị nhiều tùy chọn.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

select - sử dụng size

<select size="3">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định số tùy chọn có thể thấy trong danh sách lựa chọn.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

option - sử dụng disabled

<select>
<option disabled="disabled">Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định danh sách thả xuống không hiển thị.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

option - sử dụng label

<select>
<option label="label01">Danh sách 01</option>
<option label="label02">Danh sách 02</option>
<option label="label03">Danh sách 03</option>
<option label="label04">Danh sách 04</option>
</select>

Xác định nhãn cho tùy chon.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

option - sử dụng selected

<select> <option>Danh sách 01</option>
<option selected="selected">Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định một tùy chọn được chọn mặc định.

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

option - sử dụng value

<select>
<option value="value01">Danh sách 01</option>
<option value="value02">Danh sách 02</option>
<option value="value03">Danh sách 03</option>
<option value="value04">Danh sách 04</option>
</select>

Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit).

 Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 04 

OPTGROUP

optgroup - sử dụng label

<select>
<optgroup label="Danh sách số">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</optgroup>
<optgroup label="Danh sách chữ">
<option>Danh sách A</option>
<option>Danh sách B</option>
<option>Danh sách C</option>
</optgroup>
</select>

  Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 03   Danh sách A Danh sách B Danh sách C  

optgroup - sử dụng disabled

<select>
<optgroup label="Danh sách số" disabled="disabled">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</optgroup>
<optgroup label="Danh sách chữ">
<option>Danh sách A</option>
<option>Danh sách B</option>
<option>Danh sách C</option>
</optgroup>
</select>

  Danh sách 01 Danh sách 02 Danh sách 03 Danh sách 03   Danh sách A Danh sách B Danh sách C  

FIELDSET - LEGEND

<form action="#">
<fieldset>
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>

Thông tin cá nhân:

• Họ tên: 
• Email: 
• Ngày sinh: 

Thuộc tính disabled="disabled"

Khi sử dụng thuộc tính này, chúng ta không thể nào thao tác các chức năng trong form được, ví dụ như không thể click checkbox, radio, không thể điền trường text cho input hay khu vực textarea.

<!DOCTYPE HTML>
<html>
<head></head>

<body>
<form action="#">
<fieldset disabled="disabled">
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>

Thông tin cá nhân:

• Họ tên: 
• Email: 
• Ngày sinh: 

Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ