<label> Label
Names a form control; clicking the label focuses the control.
<label> gives a form control its name. There are two ways to connect them: point for at the control's id, or put the control inside the label.
Screen readers read a connected label, and the clickable area grows, which helps a lot with checkboxes and radio buttons on a phone. A placeholder cannot stand in for it, since it vanishes the moment someone types. Every visible control needs a label.
Labelable elements and the for attribute are explained in the label element definition (opens in a new tab). Practise in the Labels lesson.
Syntax
<label for="id">Label text</label>
<input id="id" name="name">When to use it
Text fields, selects, checkboxes, radio buttons, sliders, file pickers: if a control is visible, it needs a <label>. Sighted users read the label to know what to type. Screen readers announce it when the field gets focus.
A few cases work differently. In a group of radio buttons, the question comes from a legend inside a fieldset, and each option keeps its own label. A search field beside a magnifier button may use aria-label if there is honestly no room for visible text (a visible label still wins). Placeholder text and the title attribute do not count as labels.
The for attribute only connects to labelable elements: input, select, textarea, button, meter, output and progress. Point it at a div or a span and nothing happens. Ids must also be unique. When two fields share one, the label attaches to the first, and that is exactly what happens when the same form is included twice on a page.
Attributes
| Attribute | What it does |
|---|---|
for | The id of the control this label belongs to. |
Live example
Edit the code and watch the preview.
<label for="city">City</label>
<input type="text" id="city" name="city">
<p>
<label><input type="checkbox" name="news"> Send me the newsletter</label>
</p>More examples
Label and control in different cells
In this cart the product name and its quantity field are in separate table cells, so wrapping the input in the label is impossible. Matching for and id values link them all the same. Click a product name and its quantity field gets focus.
<form>
<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
</tr>
<tr>
<td><label for="qty-mug">Blue mug</label></td>
<td><input type="number" id="qty-mug" name="mug" min="0" value="1"></td>
</tr>
<tr>
<td><label for="qty-tea">Green tea</label></td>
<td><input type="number" id="qty-tea" name="tea" min="0" value="2"></td>
</tr>
</table>
<button>Update cart</button>
</form>Label with a hint
Keep the label short. The extra advice lives in its own hint paragraph, linked with aria-describedby. A screen reader reads the label, then the hint. Sighted users see both beside the field.
<form>
<label for="user">Username</label>
<input id="user" name="username" aria-describedby="user-hint" minlength="3" required>
<p id="user-hint">3 or more letters or digits, no spaces.</p>
<button>Create account</button>
</form>Tip: Make for match the id exactly, or wrap the control in the label.
Browser support
Every browser supports label, and the HTML Living Standard defines it. Clicking a label focuses or toggles its control everywhere, touch screens included. You can connect a label with the for attribute or by wrapping the control, and both are valid. Use for when the label and the control end up in different parts of the layout.
Accessibility
A correctly linked label becomes the control's accessible name and enlarges its click target (WCAG 1.3.1, 3.3.2, 4.1.2). The visible label text should also be part of the accessible name (WCAG 2.5.3). Each technique is shown in the W3C tutorial on labeling controls (opens in a new tab).
Common mistakes
Wrong
<label>Name</label>
<input type="text" name="name">Right
<label for="name">Name</label>
<input type="text" id="name" name="name">If the label neither wraps the input nor points to it, the two are not linked.
Wrong
<label for="news"><a href="/terms">Terms</a></label>Right
<input type="checkbox" id="terms">
<label for="terms">I accept the terms</label> (<a href="/terms">read terms</a>)Clicks get unpredictable when a label contains interactive elements. Put links outside.
Frequently asked questions
How do I connect a label to an input?
Two options. Give the input an id and set the label's for to the same value, as in <label for="email">Email</label><input id="email">, or wrap the input in the label. The explicit for/id pairing works most reliably across assistive technologies. Either way, clicking the label focuses or toggles the control. You can practise for and id in the Connecting Labels lesson.
Can I use placeholder instead of a label?
No. Placeholder text vanishes once the user starts typing, has low contrast by default and is not reliably announced as the field name. People with memory or cognitive difficulties lose the hint exactly when they need it. Use a visible <label> every time, and keep placeholder for an optional example of the expected format. The W3C note Understanding Labels or Instructions (opens in a new tab) explains why placeholder text falls short.
Practise it
- Labels (Module 6: Forms)
- Input Types (Module 6: Forms)
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Buttons and Fieldsets (Module 6: Forms)
- Built-in Validation (Module 6: Forms)
- Project: Sign-up Form (Module 6: Forms)