Thẻ Label trong HTML

• Trần Thị Vân
• 1457
• 06/07/2025

Chức năng của Thẻ Label trong HTML

Thẻ Label trong HTML được khai báo có nội dung đi cùng với một loại thẻ nào đó, có thể là thẻ input, textarea, select,... nó cho biết đoạn chữ khai báo thuộc của thẻ nào.

Cú pháp của Thẻ Label trong HTML

<label for="giatri">chuthich</label>

chuthich: Chú thích cho thẻ liên kết.

giatri: Giá trị của thuộc tính for phải giống với giá trị của thuộc tính id trong thẻ liên kết (input, select, textarea).

Các loại thẻ kết hợp với thẻ label

Thẻ Label kết hợp với thẻ INPUT

  <label for="hoten">Họ tên:</label>
  <input type="text" id="hoten" name="txthoten">

Thuộc tính for sẽ có nội dung giống với id của thẻ input.

Chạy Thử

Thẻ Label kết hợp với thẻ SELECT

<label for="cars">Choose a car:</label>
<select name="namecars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Chạy Thử

Thẻ Label kết hợp với thẻ TEXTAREA

<label for="ghichu">Ghi chú:</label>
<textarea id="ghichu" name="areaghichu" rows="4" cols="50">
Ghi chú
</textarea>

Chạy Thử

Những lưu ý quan trọng khi sử dụng thẻ Label trong HTML

Thẻ label trong HTML tuy có cách sử dụng đơn giản nhưng cần được khai báo đúng để biểu mẫu hoạt động hiệu quả, dễ sử dụng và thân thiện hơn với người dùng. Một số lưu ý quan trọng sẽ giúp tránh lỗi khi liên kết nhãn với các trường nhập liệu.

Sử dụng thuộc tính for và id đúng cách để liên kết Label với Form

Khi sử dụng thẻ label với các phần tử form như input, select hoặc textarea, thuộc tính for trong label cần có giá trị trùng với thuộc tính id của phần tử tương ứng.

Cách liên kết này giúp trình duyệt hiểu được label đang mô tả cho trường dữ liệu nào. Khi người dùng nhấn vào nội dung label, con trỏ sẽ tự động chuyển đến ô nhập liệu liên quan, giúp thao tác trên biểu mẫu nhanh và thuận tiện hơn.

<label for="email">Email</label>
<input id="email" type="email">

Nếu giá trị của for và id không giống nhau, label sẽ không liên kết được với trường nhập liệu. Đây là lỗi thường gặp khiến chức năng nhấn vào nhãn để chọn ô nhập không hoạt động.

Tăng khả năng truy cập website bằng thẻ Label

Thẻ label đóng vai trò quan trọng trong việc cải thiện khả năng truy cập của biểu mẫu. Người dùng sử dụng trình đọc màn hình hoặc các công cụ hỗ trợ khác có thể hiểu rõ mục đích của từng trường nhập liệu thông qua nội dung label.

Mỗi ô nhập liệu quan trọng trong form nên có một label mô tả rõ ràng thay vì chỉ sử dụng placeholder. Placeholder chỉ mang tính gợi ý, trong khi label giúp xác định chính xác thông tin mà người dùng cần điền.

Việc sử dụng label hợp lý không chỉ giúp website chuyên nghiệp hơn mà còn nâng cao trải nghiệm cho nhiều nhóm người dùng khác nhau.

Những lỗi thường gặp khi khai báo thẻ Label

Một số lỗi phổ biến khi sử dụng thẻ label có thể làm giảm hiệu quả của biểu mẫu:

• Không khai báo thuộc tính for hoặc không gắn label với phần tử nhập liệu.
• Thuộc tính for không trùng với id của input, select hoặc textarea.
• Sử dụng một label cho nhiều trường dữ liệu khác nhau gây khó hiểu cho người dùng.
• Đặt nội dung label quá ngắn hoặc không mô tả đúng mục đích của ô nhập.

Để tạo biểu mẫu chuẩn HTML, mỗi trường dữ liệu nên có label riêng, nội dung rõ ràng và được liên kết chính xác. Điều này giúp website dễ sử dụng hơn, đồng thời hỗ trợ tốt cho SEO và khả năng tiếp cận.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ Label trong HTML.