<label>: Phần tử Label

Try it

<div class="preference">
  <label for="cheese">I like cheese.</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">I like peas.</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

for

Giá trị là id của điều khiển form có thể gắn nhãn trong cùng tài liệu, liên kết <label> với điều khiển form đó. Lưu ý rằng thuộc tính phản ánh JavaScript của nó là htmlFor.

Ghi chú sử dụng

Liên kết nhãn với điều khiển form

Phần tử đầu tiên trong tài liệu có thuộc tính id khớp với giá trị của thuộc tính for là điều khiển được gắn nhãn cho phần tử label này — nếu phần tử có id đó thực sự là phần tử có thể gắn nhãn. Nếu nó không phải là phần tử có thể gắn nhãn, thì thuộc tính for không có tác dụng. Nếu có các phần tử khác cũng khớp với giá trị id, ở sau trong tài liệu, chúng không được xem xét.

Nhiều phần tử <label> có thể được liên kết với cùng một điều khiển form bằng cách có nhiều phần tử <label> với cùng giá trị thuộc tính for, cung cấp cho điều khiển form nhiều nhãn.

Liên kết <label> với điều khiển form, chẳng hạn <input> hoặc <textarea> mang lại một số lợi ích lớn:

• Văn bản nhãn không chỉ được liên kết trực quan với input văn bản tương ứng; nó cũng được liên kết về mặt chương trình. Điều này có nghĩa là ví dụ, trình đọc màn hình sẽ đọc nhãn khi người dùng tập trung vào input form, giúp người dùng công nghệ hỗ trợ dễ hiểu hơn dữ liệu nào cần được nhập.
• Khi người dùng nhấp hoặc chạm/gõ nhẹ vào nhãn, trình duyệt chuyển tiêu điểm đến input liên kết (sự kiện kết quả cũng được kích hoạt cho input). Diện tích nhấn tăng để lấy tiêu điểm cho input cung cấp lợi ích cho bất kỳ ai đang cố kích hoạt nó — bao gồm những người sử dụng thiết bị màn hình cảm ứng.

Có hai cách để liên kết <label> với điều khiển form, thường được gọi là liên kết rõ ràng và ngầm định.

Để liên kết rõ ràng phần tử <label> với phần tử <input>, trước tiên bạn cần thêm thuộc tính id vào phần tử <input>. Tiếp theo, bạn thêm thuộc tính for vào phần tử <label>, trong đó giá trị của for giống với id trong phần tử <input>.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

Ngoài ra, bạn có thể lồng <input> trực tiếp bên trong <label>, trong trường hợp đó không cần các thuộc tính for và id vì liên kết là ngầm định:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Hai phương pháp này tương đương, nhưng có một số điều cần xem xét:

• Mặc dù kết hợp trình duyệt và screen reader phổ biến hỗ trợ liên kết ngầm định, không phải tất cả công nghệ hỗ trợ đều làm vậy.
• Tùy thuộc vào thiết kế của bạn, loại liên kết có thể ảnh hưởng đến khả năng tạo kiểu. Làm cho <label> và điều khiển form là phần tử anh em thay vì cha-con có nghĩa là chúng là các hộp riêng biệt, kề nhau, cho phép bố cục tùy chỉnh hơn như căn hàng chúng với các phương pháp bố cục grid hoặc flex.
• Liên kết rõ ràng yêu cầu điều khiển form có id, phải là duy nhất trong toàn bộ tài liệu. Điều này khó đặc biệt trong ứng dụng được thành phần hóa. Các framework thường cung cấp giải pháp của riêng họ, chẳng hạn như useId() của React, nhưng vẫn cần thêm điều phối để làm đúng.

Nhìn chung, chúng tôi khuyến nghị sử dụng liên kết rõ ràng với thuộc tính for, để đảm bảo tương thích với các công cụ bên ngoài và công nghệ hỗ trợ. Thực ra, bạn có thể đồng thời lồng và cung cấp id/for để tương thích tối đa.

Điều khiển form mà nhãn đang gắn nhãn được gọi là điều khiển được gắn nhãn của phần tử nhãn. Nhiều nhãn có thể được liên kết với cùng một điều khiển form:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Các phần tử có thể được liên kết với phần tử <label> bao gồm <button>, <input> (ngoại trừ type="hidden"), <meter>, <output>, <progress>, <select> và <textarea>.

Khả năng tiếp cận

Nội dung tương tác

Ngoài điều khiển form được liên kết ngầm định, đừng đặt thêm các phần tử tương tác như anchors hoặc buttons bên trong <label>. Làm vậy khiến người dùng khó kích hoạt input form liên kết với label.

Đừng làm thế này:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Nên làm thế này:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Tiêu đề

Đặt các phần tử tiêu đề trong <label> gây trở ngại cho nhiều loại công nghệ hỗ trợ, vì các tiêu đề thường được dùng như công cụ hỗ trợ điều hướng. Nếu văn bản nhãn cần được điều chỉnh trực quan, hãy sử dụng các lớp CSS áp dụng cho phần tử <label> thay thế.

Nếu form hoặc một phần của form cần tiêu đề, hãy sử dụng phần tử <legend> được đặt trong <fieldset>.

Đừng làm thế này:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Nên làm thế này:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Nút

Phần tử <input> với khai báo type="button" và thuộc tính value hợp lệ không cần nhãn liên kết. Làm vậy thực sự có thể gây trở ngại cho cách công nghệ hỗ trợ phân tích input nút. Điều tương tự áp dụng cho phần tử <button>.

Ví dụ

Định nghĩa nhãn ngầm định

<label>Click me <input type="text" /></label>

Định nghĩa nhãn rõ ràng với thuộc tính "for"

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt