Cách dùng thẻ label trong HTML

Thẻ label dùng để định nghĩa nhãn cho các thẻ input trong HTML. Tác dụng của label là làm cho thao tác nhập liệu trở nên dễ dàng hơn.

Code mẫu:

<label for="hoten">Họ tên:</label><input type="text" name="hoten" id="hoten">

Kết quả:


Giờ bạn có thể nhấn vào chữ Họ tên để vào ô nhập liệu, hay nói cách khác, thẻ label làm tăng diện tích click chuột bắt đầu thao tác nhập.

Nếu không có thẻ label, khi click vào chữ Họ tên sẽ không có điều gì xảy ra, giống như ví dụ dưới đây:

Họ tên:


Cú pháp của thẻ label

Thẻ label yêu cầu thuộc tính for phải được điền giá trị, và giá trị trong thuộc tính id của input phải giống với giá trị trong thuộc tính for của label. Làm như thế để label biết được nó được dùng cho input nào.

Mẹo

Nếu bạn cho rằng cách dùng for và id lằng nhằng, thì bạn có thể không cần dùng nó mà vẫn cho kết quả tương tự, nhưng khi ấy bạn phải cho thẻ input nằm trong label, code mẫu:

<label>Họ tên:<input type="text" name="hoten"></label>

Các ví dụ khác

Label cho thẻ radio button:


 


Code mẫu:

<form action="#">
<label for="nam">Nam</label><input id="nam" name="gioi" type="radio" value="Nam" /
<br />
<label for="nu">Nữ</label><input id="nu" name="gioi" type="radio" value="Nữ" />
<br />
<input type="submit" value="Gửi" />
</form>

Chia sẻ bài này: