Thẻ <label> trong HTML dùng để hiển thị nhãn cho các trường nhập liệu. Việc sử dụng đúng thẻ này giúp:
- Người dùng hiểu rõ họ đang nhập gì.
- Tăng tính khả dụng (accessibility), hỗ trợ người dùng sử dụng bằng bàn phím hoặc trình đọc màn hình.
- Cho phép click vào nhãn để chọn input (radio, checkbox,…).
1. Cách dùng thẻ <label>
Có 2 cách gắn nhãn cho input:
Cách 1: Bao quanh input
<label>
Họ tên:
<input type="text" name="hoten">
</label>
Cách 2: Dùng for và id
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Trong cách này, thuộc tính
forcủa<label>phải trùng vớiidcủainput.
2. Tại sao nên dùng label
- Khi người dùng click vào nhãn, input tương ứng sẽ được focus hoặc chọn (đặc biệt hữu ích với radio và checkbox).
- Giúp người khiếm thị sử dụng trình đọc màn hình dễ dàng hơn.
- Giúp biểu mẫu trở nên chuyên nghiệp và dễ sử dụng hơn.
3. Ví dụ với radio và checkbox
<p>Giới tính:</p>
<input type="radio" id="nam" name="gioitinh" value="nam">
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioitinh" value="nu">
<label for="nu">Nữ</label>
<p>Sở thích:</p>
<input type="checkbox" id="doc-sach" name="so_thich[]" value="docsach">
<label for="doc-sach">Đọc sách</label>
<input type="checkbox" id="nghe-nhac" name="so_thich[]" value="nghenhac">
<label for="nghe-nhac">Nghe nhạc</label>
4. Thực hành
Tạo file form-label.html và thêm:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thẻ label trong HTML</title>
</head>
<body>
<h1>Biểu mẫu đăng ký</h1>
<form action="#" method="post">
<p>
<label for="hoten">Họ tên:</label><br>
<input type="text" id="hoten" name="hoten" required>
</p>
<p>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email">
</p>
<p>
Giới tính:<br>
<input type="radio" id="nam" name="gioitinh" value="nam">
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioitinh" value="nu">
<label for="nu">Nữ</label>
</p>
<p>
<button type="submit">Gửi</button>
</p>
</form>
</body>
</html>
5. Ghi nhớ
| Thành phần | Ý nghĩa |
|---|---|
<label> | Hiển thị nhãn cho input |
for | Trỏ đến id của input tương ứng |
| Gắn nhãn đúng cách | Tăng khả năng sử dụng và truy cập |
Thảo luận