Runnable HTML Docs: Label

Q: What is the for attribute in a label?

for holds the id of the field the label belongs to: Email . It must match the id exactly, not the name.

Q: How do I hide a label but keep it for screen readers?

Keep the and hide it visually with a class that shrinks it to 1 pixel and clips it, rather than display: none, which hides it from screen readers too. For a field with no room for any label, aria-label on the field is the alternative.

What the label element does

<label> gives a form field its name. Connect it with for, set to the field's id, and two things happen: screen readers announce the label when the field is focused, and clicking the label text focuses the field. Click both texts below:

<!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>

Clicking "City" puts the cursor in its field. Clicking "Country" does nothing, and a screen reader focusing that second field hears only "edit text", with no name. The two look identical; only one is labelled.

Two ways to connect a label

Use for and id, or put the field inside the label:

<!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` and `id`	Wrapping
Needs an `id`	Yes, unique on the page	No
Label and field can be apart	Yes (a table cell, a grid)	No, the field is inside
Easy to break	By a typo or a duplicate `id`	By putting two fields in one label

for must match the field's id, not its name. The two are often the same word, which hides the mistake until someone changes one. Doing both (wrapping and for) is fine and common.

A label can be connected to <input> (except type="hidden"), <select>, <textarea>, <button>, <meter>, <output> and <progress>. One label names one field. A field can have more than one label, though one clear label is easier for everyone.

A bigger click target for checkboxes and radios

For small controls the label matters most: clicking anywhere on it toggles the box, so the target is the whole line of text, not a 13-pixel square. Styling the label can make the target even larger:

<!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>

Click the padding of each row, away from the box. The first row toggles; the second does nothing unless you hit the box itself. More on checkboxes in HTML checkbox.

Hints and error messages

A label should be short: the name of the field. Extra instructions and error messages go in separate elements, connected with aria-describedby, so screen readers read the label first and the description after it:

<!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>

Press Create with the field empty, then with AB, then with ada99. With aria-describedby, a screen reader announces something like "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." The asterisk is aria-hidden because the required attribute already says "required"; hearing "star" adds nothing.

Hidden labels

Some fields have a visible cue other than a text label, such as a search box next to a Search button. The label is still needed; hide it visually but keep it in the page for screen readers:

<!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>

Do not hide it with display: none or visibility: hidden: those hide it from screen readers too, and not every browser and screen reader still uses a hidden label as the name. The other option is aria-label="Search courses" on the input, which names it without any label element. A visible label is still the best choice whenever there is room: everyone benefits from seeing what a field is for.

Common mistakes

for pointing at the name instead of the id. Nothing connects.
Duplicate ids. for connects to the first element with that id, which may be a field in another form on the page.
Placeholder instead of a label. It vanishes on typing and is not a reliable name.
Two fields inside one label. A label names one field; the second is left unlabelled.
A link inside a checkbox's label, such as "I accept the terms" with "terms" as a link. Part of the line toggles the box and part opens a page, which is easy to hit by mistake. Put the link outside the label.
Hiding the label with display: none. Use a visually-hidden class.
Text next to a field that is not a <label>. It looks the same and does nothing. For the form around your fields, see HTML forms.

Frequently Asked Questions

What does the label tag do in HTML?

It names a form field. Screen readers read the label when the field is focused, and clicking the label focuses the field, or toggles it for a checkbox or radio button.

What is the for attribute in a label?

for holds the id of the field the label belongs to: <label for="email">Email</label> <input id="email">. It must match the id exactly, not the name.

Should I put the input inside the label or use for?

Both work in current browsers and screen readers. Wrapping needs no ids; for and id let the label and the field sit in different places in the markup, such as separate table cells. Many teams wrap and add for as well.

Can a placeholder replace a label?

No. The placeholder disappears as soon as the reader types, is often low contrast, and is not reliably announced as the field's name. Use a visible <label> and keep the placeholder for an example value, if at all.

How do I hide a label but keep it for screen readers?

Keep the <label> and hide it visually with a class that shrinks it to 1 pixel and clips it, rather than display: none, which hides it from screen readers too. For a field with no room for any label, aria-label on the field is the alternative.

Related concepts