HTML <label> thẻ

Định nghĩa và cách sử dụng

<label> Thẻ label định nghĩa nhãn (thẻ) cho phần tử input.

Thẻ label không tạo ra bất kỳ hiệu ứng đặc biệt nào đối với người dùng. Tuy nhiên, nó cải thiện khả năng sử dụng cho người dùng chuột. Nếu bạn nhấp vào văn bản trong thẻ label, sẽ kích hoạt điều khiển này. Nghĩa là, khi người dùng chọn thẻ này, trình duyệt sẽ tự động chuyển đổi sự tập trung đến phần tử biểu mẫu liên quan.

<label> Nhãn của Thuộc tính for Nó nên trùng với thuộc tính id của phần tử liên quan.

<label> Nhãn có thể định nghĩa nhãn (thẻ) cho nhiều phần tử:

Cách sử dụng phần tử trên một cách đúng đắn với nhãn sẽ có lợi cho các người dùng sau:

  • Người dùng đọc màn hình (khi người dùng tập trung vào phần tử, sẽ đọc nhãn)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> Người dùng khó khăn để nhấp vào các khu vực rất nhỏ (ví dụ như hộp chọn) - vì khi người dùng nhấp vào

Xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Label

Mẫu

Ba hộp chọn có label:

<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="Gửi">
</form>

Thử ngay

Lưu ý và ghi chú

Lưu ý:<label> Thuộc tính for của phần tử phải bằng thuộc tính id của phần tử liên quan để chúng có thể được gắn kết lại với nhau. Cũng có thể thông qua việc đặt phần tử trong <label> Phần tử sẽ gắn nhãn vào phần tử.

Thuộc tính

Thuộc tính Giá trị Mô tả
for ID phần tử Định nghĩa label gắn kết với phần tử biểu mẫu nào.
form ID biểu mẫu Định nghĩa trường label thuộc biểu mẫu.

Thuộc tính toàn cục

<label> Thẻ hỗ trợ Thuộc tính toàn cục trong HTML。

Thuộc tính sự kiện

<label> Thẻ 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ị các giá trị mặc định sau <label> Th元件：

label {
  cursor: default;
}

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ