×

Cách sử dụng thẻ <label> để gắn nhãn cho trường nhập liệu trong HTML

Avatar of admin
admin 1 Views

Khi xây dựng các biểu mẫu trên trang web bằng HTML, việc giúp người dùng hiểu rõ mục đích của từng trường nhập liệu là rất quan trọng. Đây là lý do vì sao bạn nên sử dụng thẻ <label> để gắn nhãn cho các trường này. Thẻ <label> không chỉ cải thiện trải nghiệm người dùng mà còn giúp trang web trở nên thân thiện hơn với các công cụ tìm kiếm và các thiết bị trợ giúp, như screen reader. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ này để gắn nhãn cho các trường nhập liệu trong HTML.

Tại sao nên sử dụng thẻ <label>

  1. Tương tác tốt hơn: Khi người dùng nhấp vào nhãn, con trỏ chuột sẽ tự động chuyển đến trường nhập liệu liên quan. Điều này giúp tăng cường độ tương tác và tiện lợi cho người dùng.
  2. Tăng cường khả năng truy cập: Các thiết bị trợ giúp như screen reader dựa vào các nhãn này để cung cấp thông tin chính xác cho người dùng.
  3. Cải thiện SEO: Thẻ <label> góp phần làm cho trang web trở nên cấu trúc rõ ràng, dễ hiểu hơn đối với các công cụ tìm kiếm.

Cấu trúc của thẻ <label>

Thẻ <label> có thể được sử dụng theo hai cách chính:

  1. Sử dụng thuộc tính for: Cách này yêu cầu bạn gán giá trị của thuộc tính for trên thẻ <label> trùng với giá trị của thuộc tính id trên trường nhập liệu.
  2. Bọc trường nhập liệu trong thẻ <label>: Thẻ <label> sẽ bao bọc trực tiếp trường nhập liệu.

Cách 1: Sử dụng thuộc tính for

Ví dụ, dưới đây là cách tạo nhãn cho trường nhập liệu email bằng cách sử dụng thuộc tính for:

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

Trong ví dụ này:

  • for="email" xác định rõ rằng nhãn này liên quan đến trường nhập liệu có id="email".
  • Khi người dùng nhấp vào chữ "Email:", con trỏ chuột sẽ tự động được đặt vào trường nhập liệu email.

Cách 2: Bọc trường nhập liệu trong thẻ <label>

Ví dụ, dưới đây là cách tạo nhãn cho trường nhập liệu username bằng cách bọc trường nhập liệu trong thẻ <label>:

<label>Username: <input type="text" name="username"></label>

Trong ví dụ này:

  • Trường nhập liệu được bao bọc trực tiếp bởi thẻ <label>.
  • Khi người dùng nhấp vào chữ "Username:", trường nhập liệu sẽ được kích hoạt.

Ví dụ thực tế

Dưới đây là một ví dụ đầy đủ của một biểu mẫu đăng ký sử dụng thẻ <label>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Đăng Ký</title>
</head>
<body>
    <h1>Form Đăng Ký</h1>
    <form>
        <div>
            <label for="fullname">Họ và tên:</label>
            <input type="text" id="fullname" name="fullname" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <label>Mật khẩu: <input type="password" name="password" required></label>
        </div>
        <button type="submit">Đăng Ký</button>
    </form>
</body>
</html>

Kết luận

Việc sử dụng thẻ <label> để gắn nhãn cho các trường nhập liệu là một phần quan trọng trong việc xây dựng các biểu mẫu thân thiện và dễ sử dụng. Nhãn không chỉ giúp người dùng dễ dàng hiểu được mục đích của từng trường nhập liệu mà còn làm tăng khả năng truy cập cho trang web của bạn. Hãy luôn nhớ sử dụng thẻ <label> trong các biểu mẫu của bạn để tạo ra trải nghiệm tốt nhất cho người dùng.

Comments

Bài viết liên quan