Label trong HTML: thuộc tính for và cách gắn nhãn cho form

Phần tử label làm gì

<label> đặt tên cho một trường form. Nối nó bằng for, gán bằng id của trường, và hai điều sẽ xảy ra: trình đọc màn hình đọc nhãn khi trường được focus, và nhấp vào chữ của nhãn sẽ focus vào trường. Nhấp thử vào cả hai dòng chữ bên dưới:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Nhấp vào "City" đặt con trỏ vào trường của nó. Nhấp vào "Country" không có tác dụng gì, và trình đọc màn hình khi focus vào trường thứ hai chỉ đọc "edit text", không có tên. Hai dòng trông giống hệt nhau; chỉ một dòng có nhãn.

Hai cách nối nhãn

Dùng for và id, hoặc đặt trường vào bên trong nhãn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

for phải khớp với id của trường, không phải name. Hai giá trị này thường là cùng một từ, nên lỗi bị che đi cho đến khi ai đó đổi một trong hai. Làm cả hai cách (bọc và for) là ổn và rất phổ biến.

Một nhãn có thể nối với <input> (trừ type="hidden"), <select>, <textarea>, <button>, <meter>, <output> và <progress>. Một nhãn đặt tên cho một trường. Một trường có thể có nhiều nhãn, dù một nhãn rõ ràng thì dễ hiểu hơn cho mọi người.

Vùng nhấp lớn hơn cho checkbox và radio

Với các control nhỏ, nhãn quan trọng nhất: nhấp vào bất kỳ đâu trên nhãn đều bật/tắt ô, nên vùng nhấp là cả dòng chữ chứ không chỉ một ô vuông 13 pixel. Thêm style cho nhãn còn làm vùng nhấp lớn hơn nữa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Nhấp vào phần đệm của mỗi hàng, cách xa ô. Hàng đầu tiên bật/tắt; hàng thứ hai không làm gì trừ khi bạn nhấp trúng chính cái ô. Tìm hiểu thêm về checkbox ở checkbox trong HTML.

Gợi ý và thông báo lỗi

Nhãn nên ngắn: chỉ là tên của trường. Hướng dẫn thêm và thông báo lỗi nằm ở các phần tử riêng, nối bằng aria-describedby, để trình đọc màn hình đọc nhãn trước rồi mới đọc phần mô tả:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Nhấn Create khi ô trống, rồi với AB, rồi với ada99. Nhờ aria-describedby, trình đọc màn hình sẽ đọc kiểu như "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." Dấu sao có aria-hidden vì thuộc tính required đã nói "required" rồi; nghe thêm "star" chẳng có ích gì.

Nhãn ẩn

Một số trường có dấu hiệu nhận biết khác ngoài nhãn chữ, chẳng hạn ô tìm kiếm cạnh nút Search. Nhãn vẫn cần thiết; hãy ẩn nó về mặt hiển thị nhưng giữ trong trang cho trình đọc màn hình:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Đừng ẩn bằng display: none hay visibility: hidden: chúng ẩn luôn với trình đọc màn hình, và không phải trình duyệt hay trình đọc màn hình nào cũng còn dùng nhãn bị ẩn làm tên. Lựa chọn còn lại là aria-label="Search courses" trên input, cách này đặt tên mà không cần phần tử label nào. Dù vậy, nhãn hiển thị vẫn là lựa chọn tốt nhất mỗi khi còn chỗ: ai cũng được lợi khi thấy rõ một trường dùng để làm gì.

Lỗi thường gặp

• for trỏ tới name thay vì id. Không có gì được nối.
• Trùng id. for nối với phần tử đầu tiên có id đó, có thể là một trường trong form khác trên trang.
• Dùng placeholder thay cho nhãn. Nó biến mất khi gõ và không phải là tên đáng tin cậy.
• Hai trường trong một nhãn. Một nhãn chỉ đặt tên cho một trường; trường thứ hai bị bỏ không có nhãn.
• Một liên kết bên trong nhãn của checkbox, như "I accept the terms" với "terms" là liên kết. Một phần dòng bật/tắt ô, một phần mở trang khác, rất dễ bấm nhầm. Hãy đặt liên kết ra ngoài nhãn.
• Ẩn nhãn bằng display: none. Dùng một class ẩn về mặt hiển thị (visually-hidden).
• Chữ cạnh trường nhưng không phải <label>. Trông giống hệt và chẳng làm gì. Về form bao quanh các trường, xem form trong HTML.