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;
}
816
Bạn nên đọc
Xác thực tài khoản!
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
Số điện thoại chưa đúng định dạng!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Cách đánh số trang bỏ trang đầu, đánh số từ trang bất kỳ trong Word chi tiết nhất
Hôm qua -
Trực tâm là gì? Xác định trực tâm trong tam giác
Hôm qua 1 -
Những câu nói cà khịa người yêu cũ, stt cà khịa người yêu cũ bá đạo
Hôm qua 2 -
Số thập phân là gì? Các phép tính với số thập phân
Hôm qua -
999+ stt bán quần áo online hay, hút triệu like
Hôm qua -
177013 là gì?
Hôm qua -
Cách xóa tài khoản Facebook vĩnh viễn trên điện thoại, máy tính
Hôm qua -
Những lời chúc thi tốt vui nhộn và hài hước
Hôm qua 1 -
Cách cài đặt Python trên Windows, macOS, Linux
Hôm qua -
20+ cách giải phóng RAM trên máy tính Windows 10, reset RAM Win 10 đơn giản nhất
Hôm qua