HTML label: Connect for and id and Enlarge the Click Target

HTML <label> associates a form control’s name with its visible text and assistive technologies. Connect the label’s for to the control’s id, or place the control inside the label. Clicking the associated text can focus an input or toggle a checkbox.

Connect controls explicitly with for and id

The for attribute takes the target control’s id in the same document, not its name. An id must be unique within the document, while name identifies a field in submitted data. Even if the layout separates label and input, their naming relationship can remain intact when the for and id match.

Save the following document as labels.html and open it in a browser. The text input uses for; the checkbox uses a wrapping label. This is an interface exercise that does not submit data to a server.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing label associations</title>
</head>
<body>
  <h1>Names for form controls</h1>
  <p>
    <label for="reader-name">Display name</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="e.g. Sky">
  </p>
  <p id="name-help">Enter the nickname to show on screen.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Get learning updates
    </label>
  </p>
</body>
</html>

1. Click Display name to put the cursor in the input. After typing, the placeholder disappears, but the label remains visible.
2. Click the text Get learning updates to select the checkbox, then click again to clear it. You do not need to hit the small checkbox precisely.
3. Use Tab to move between the controls and Space to toggle the checkbox, checking keyboard interaction too.

Wrapping labels and supplementary descriptions serve different roles

Placing an input inside label creates an implicit association without for. Include only the associated control within one label and do not nest another label inside it. You can also use id and for with a wrapping label, but for must refer to the contained control. An explicit for/id association is worth considering for compatibility with assistive technology and external tools.

The label is the name that tells readers what to enter. Put supplementary instructions or error messages in a separate paragraph and associate them with aria-describedby. In the example, Enter the nickname to show on screen. supplements the name; the placeholder is not used as a replacement for the label.

When the association or clicking does not work

Check for typos and case differences in for, duplicate id values, and the target element’s type. Pointing for to an element that cannot be labelled, such as a hidden input, will not make it work like a normal input. Labels also work with select and textarea; name groups of related choices with fieldset and legend.

Putting separate links or buttons inside a label can make it unclear whether clicking should navigate or select a control. Place extra links outside and explain the context first. Style the label with CSS rather than inserting a heading element just to enlarge it. The MDN label reference describes supported controls and authoring requirements.