Thẻ HTML <label>
Định nghĩa và cách sử dụng thẻ <label>
Thẻ <label>
xác định nhãn cho một số thành phần:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Việc sử dụng đúng nhãn với các yếu tố trên sẽ có lợi cho:
- Người dùng trình đọc màn hình (sẽ đọc to nhãn khi người dùng được focus vào phần tử)
- Người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như hộp kiểm) - bởi vì khi người dùng nhấp vào văn bản trong phần tử
<label>
, thao tác này sẽ chuyển đổi đầu vào (điều này làm tăng kích thước vùng nhấn).
Mẹo: Thuộc tính for của <label>
phải tương đương thuộc tính id của phần tử liên quan để liên kết chúng với nhau. Một nhãn cũng có thể được gắn với một phần tử bằng cách đặt phần tử bên trong phần tử <label>
.
Ví dụ về 3 nút radio có nhãn:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Hỗ trợ trình duyệt
Phần tử <label> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
for | element_id | Chỉ định id của phần tử biểu mẫu mà nhãn phải được liên kết với |
form | form_id | Chỉ định nhãn thuộc về hình thức nào |
Thuộc tính Global
Thẻ <label>
cũng hỗ trợ các thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <label>
cũng hỗ trợ thuộc tính sự kiện trong HTML.
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <label>
với các giá trị mặc định sau:
label {
cursor: default;
}
527
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách lấy lại quyền truy cập ổ cứng, sửa lỗi không mở được ổ cứng
Hôm qua -
Cách kích hoạt bảo mật 2 lớp trên Telegram
Hôm qua -
Cách làm 4 món thịt ngâm mắm tỏi chua ngọt thơm ngon ngày Tết
Hôm qua -
Những câu nói hài hước về tóc, stt về tóc hay và chất
Hôm qua -
Cách sử dụng VPN trên trình duyệt Opera
Hôm qua -
Máy tính ngốn bao tiền điện mỗi tháng?
Hôm qua -
Chiêm ngưỡng loạt ảnh vũ trụ ấn tượng từ kính viễn vọng 10 tỷ USD
Hôm qua 1 -
Hướng dẫn kích hoạt hoặc vô hiệu hóa bộ lọc SmartScreen trên Windows
Hôm qua -
Internet vệ tinh của Musk đến Đông Nam Á, phí thuê bao 1,1 triệu/tháng
Hôm qua -
Hướng dẫn tạo chữ ký Gmail chuyên nghiệp
Hôm qua