Thẻ Label trong HTML: Hướng dẫn từ A-Z & Ví dụ Thực tế

Khi xây dựng form, bạn có từng nghĩ rằng dòng chữ bên cạnh ô nhập liệu chỉ đơn thuần là văn bản? Thực tế, thẻ label trong html lại là một yếu tố cực kỳ quan trọng. Nó không chỉ giúp giao diện rõ ràng mà còn cải thiện mạnh mẽ trải nghiệm người dùng và khả năng truy cập. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu từ A-Z về thẻ label, cách sử dụng và lý do tại sao bạn không nên bỏ qua nó.

Thẻ Label trong HTML là gì?

Nếu bạn đang xây dựng bất kỳ biểu mẫu (form) nào trên website, từ form đăng nhập đơn giản đến form khảo sát phức tạp, bạn chắc chắn sẽ cần đến thẻ <label>. Vậy thẻ label html là gì?

Hiểu một cách đơn giản, thẻ <label> dùng để tạo ra một nhãn dán, một chú thích cho một phần tử trong form. Vai trò chính của nó là mô tả chức năng của một ô nhập liệu (<input>), một hộp văn bản (<textarea>), hoặc một danh sách chọn (<select>). Nó nói cho người dùng biết chính xác họ cần điền thông tin gì vào ô trống bên cạnh.

Nhưng tại sao <label> không chỉ là một dòng văn bản thông thường được đặt cạnh thẻ <input>? Điểm khác biệt cốt lõi nằm ở sự kết nối. Một thẻ <label> được liên kết đúng cách với một phần tử form sẽ mang lại hai lợi ích lớn mà văn bản thường không làm được:

• Tăng vùng tương tác: Người dùng có thể nhấp chuột trực tiếp vào nhãn để kích hoạt hoặc chọn phần tử liên quan. Ví dụ, nhấp vào nhãn “Ghi nhớ đăng nhập” sẽ đánh dấu vào ô checkbox tương ứng.
• Hỗ trợ công nghệ: Các trình đọc màn hình (screen reader) dành cho người khiếm thị sẽ đọc to nội dung của nhãn khi người dùng tập trung vào ô nhập liệu, giúp họ hiểu rõ ngữ cảnh.

Tầm quan trọng của Thẻ Label

Việc sử dụng thẻ <label> không phải là một lựa chọn, mà là một yêu cầu bắt buộc để xây dựng một website chuyên nghiệp và thân thiện. Tác dụng của thẻ label thể hiện rõ nhất ở hai khía cạnh quan trọng: khả năng truy cập và trải nghiệm người dùng.

Cải thiện vượt trội Khả năng Truy cập

Đây là lợi ích quan trọng nhất. Đối với những người dùng phải dựa vào trình đọc màn hình, một form không có <label> gần như không thể sử dụng. Khi người dùng di chuyển tới một ô nhập liệu, trình đọc màn hình sẽ tìm và đọc to nhãn được liên kết với ô đó. Nếu không có <label>, nó chỉ có thể thông báo “ô nhập văn bản” hoặc “hộp kiểm”, khiến người dùng không biết phải nhập thông tin gì.

Sử dụng <label> đảm bảo rằng mọi người, không phân biệt khả năng, đều có thể truy cập và tương tác với nội dung của bạn một cách dễ dàng.

Nâng cao Trải nghiệm Người dùng

Bạn đã bao giờ cố gắng chọn một nút radio hoặc một checkbox nhỏ xíu trên màn hình điện thoại chưa? Khá là khó chịu đúng không? Thẻ <label> giải quyết triệt để vấn đề này.

Khi một nhãn được liên kết với một ô input, toàn bộ khu vực của nhãn đó sẽ trở thành một vùng có thể nhấp được. Người dùng chỉ cần chạm vào dòng chữ mô tả thay vì phải nhắm chính xác vào chiếc hộp nhỏ. Điều này giúp việc điền form trở nên nhanh hơn, dễ dàng hơn và giảm thiểu sự bực bội, đặc biệt trên các thiết bị di động.

Cú pháp và Cách sử dụng Thẻ Label chuẩn xác

Để thẻ <label> phát huy hết sức mạnh, bạn cần liên kết label và input một cách chính xác. Có hai phương pháp chính để làm điều này: tường minh (explicit) và ngầm định (implicit). WiWeb khuyến khích bạn sử dụng cách tường minh vì tính rõ ràng và ổn định của nó.

Thuộc tính for

Thuộc tính for chính là chìa khóa để tạo ra mối liên kết này. Giá trị của thuộc tính for trong thẻ <label> phải trùng khớp chính xác với giá trị của thuộc tính id trong thẻ <input> (hoặc các thẻ form khác).

label for="ten_id" sẽ liên kết với input id="ten_id".

Cách dùng tường minh

Đây là phương pháp phổ biến và được đề xuất. Bạn đặt thẻ <label> và <input> riêng biệt, sau đó dùng cặp thuộc tính for và id để kết nối chúng. Cách này giúp mã nguồn của bạn sạch sẽ, dễ đọc và dễ quản lý hơn, đặc biệt trong các form phức tạp.

Ví dụ:

<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username">

Khi bạn nhấp vào chữ “Tên đăng nhập:”, con trỏ chuột sẽ tự động nhảy vào ô nhập liệu.

Cách dùng ngầm định

Với phương pháp này, bạn đặt thẻ <input> nằm hoàn toàn bên trong thẻ <label>. Trình duyệt sẽ tự động hiểu rằng nhãn này thuộc về phần tử input bên trong nó. Bạn không cần dùng đến thuộc tính for và id.

Ví dụ:

<label>
  Ghi nhớ mật khẩu:
  <input type="checkbox" name="remember">
</label>

Cách này tuy ngắn gọn nhưng có thể gây khó khăn cho việc tạo kiểu CSS và không được một số công nghệ hỗ trợ tốt bằng cách tường minh. Vì vậy, hãy ưu tiên cách dùng for và id nhé.

Ví dụ thực tế

Lý thuyết là vậy, giờ hãy cùng xem một vài ví dụ thẻ label trong html với các loại input bạn sẽ gặp hàng ngày. WiWeb sẽ sử dụng phương pháp tường minh (explicit) được khuyến khích.

Sử dụng với input type=”text”

Đây là trường hợp cơ bản nhất. Dùng để nhập tên, email, địa chỉ…

<label for="email">Địa chỉ Email:</label>
<input type="email" id="email" name="user_email">

<label for="fullname">Họ và tên:</label>
<input type="text" id="fullname" name="user_fullname">

Sử dụng với input type=”checkbox”

Checkbox cho phép người dùng chọn một hoặc nhiều lựa chọn. Việc nhấp vào nhãn để chọn/bỏ chọn cực kỳ tiện lợi.

<input type="checkbox" id="agree" name="agree_terms">
<label for="agree">Tôi đồng ý với các điều khoản dịch vụ.</label>

Bạn thử nhấp vào dòng chữ “Tôi đồng ý…” xem, ô checkbox sẽ được đánh dấu ngay!

Sử dụng với input type=”radio”

Nút radio dùng khi người dùng chỉ được phép chọn một tùy chọn duy nhất trong một nhóm. Mỗi nút radio phải có một <label> riêng.

<p>Vui lòng chọn phương thức thanh toán:</p>
<input type="radio" id="cod" name="payment" value="cod">
<label for="cod">Thanh toán khi nhận hàng (COD)</label><br>

<input type="radio" id="bank" name="payment" value="bank">
<label for="bank">Chuyển khoản ngân hàng</label><br>

<input type="radio" id="momo" name="payment" value="momo">
<label for="momo">Ví điện tử MoMo</label>

Phân biệt Label và Placeholder

Nhiều người mới bắt đầu thường nhầm lẫn giữa vai trò của <label> và thuộc tính placeholder của thẻ <input>. Chúng hoàn toàn khác nhau và không thể thay thế cho nhau.

Hãy luôn sử dụng <label>. Chỉ sử dụng placeholder như một gợi ý bổ sung nếu thực sự cần thiết.

Khả năng tương thích với Trình duyệt

Bạn có thể hoàn toàn yên tâm khi sử dụng thẻ <label>. Đây là một trong những thẻ HTML cơ bản và được hỗ trợ đầy đủ bởi tất cả các trình duyệt hiện đại.

• Chrome
• Firefox
• Safari
• Edge
• Opera

Không có lý do gì để bạn phải lo lắng về vấn đề tương thích khi triển khai thẻ này trên website của mình.

Lời kết

Qua bài viết này, WiWeb hy vọng bạn đã hiểu rõ rằng thẻ label trong html không chỉ là một dòng chữ trang trí. Nó là một công cụ mạnh mẽ, tuy đơn giản nhưng lại có tác động lớn đến tính khả dụng (usability) và khả năng truy cập (accessibility) của website. Việc sử dụng <label> đúng cách là một dấu hiệu của lập trình viên chuyên nghiệp, người thực sự quan tâm đến trải nghiệm của mọi người dùng.

Luôn nhớ liên kết label và input bằng cặp for và id để tạo ra những biểu mẫu thân thiện và hiệu quả nhất.

Bạn còn thắc mắc nào về cách sử dụng thẻ label không? Hãy chia sẻ trong phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, chú trọng vào trải nghiệm người dùng, WiWeb luôn sẵn sàng đồng hành. Liên hệ với chúng tôi ngay hôm nay!