<label>
The <label> element gives a form control a human-readable name and makes that name clickable — associated with a control either by its for attribute or by wrapping the control, which is a real accessibility win, not decoration.
Definition
<label> gives a form control a caption — the visible text that tells a person what the field is for. But it is far more than a styled line of text next to a box: a label is *programmatically associated* with its control, which means the browser and assistive technology treat the two as one unit. Clicking the label activates the control, and a screen reader reads the label out when the control receives focus.
Because that association is the whole point, a <label> should always be tied to exactly one control. It pairs naturally with every <input>, as well as with <textarea> and <select>. For where labels sit in the bigger picture, see HTML Forms — the basics.
Syntax
<!-- association by id -->
<label for="email">Email</label>
<input id="email" type="email" name="email">
<!-- association by wrapping -->
<label>Email <input type="email" name="email"></label>Parameters
A <label> has one attribute that matters, and one alternative structural pattern that replaces the need for it.
| Attribute | Description |
|---|---|
for | The id of the control this label names. Set for to the control's id and the two are associated — clicking the label focuses or toggles that control. This is the explicit form of association. |
| (wrapping) | Instead of for, you may place the control *inside* the <label> element. The association is then implicit — no id is required — and clicking anywhere on the label still activates the nested control. |
Use for when the label and control are separated in the markup (common when a CSS grid or flex layout positions them); use wrapping when the control sits right beside its caption, as it often does for a checkbox or radio button. Never do both at once, and never point two labels at the same id.
Return value
<label> has no return value; its effect is the association it creates between a caption and a control. That association delivers two concrete benefits. First, a larger, more forgiving hit target: clicking the word *Remember me* toggles the checkbox beside it, which matters most for the small checkboxes and radio buttons that are otherwise hard to tap on a phone. Second, and more importantly, accessibility — a screen reader announces the label text when the user moves focus to the control, so a blind user knows a bare box is asking for their email and not their name.
- Explicit association: the label's
forvalue must match the control'sidexactly (ids are case-sensitive). - Implicit association: wrap the control inside the
<label>and noidis needed at all. - A control with no associated label is announced only by its type — an accessibility gap that automated audits flag.
- The label itself is never submitted; it is a caption, while the control's
nameandvaluecarry the data.
Examples
Explicit association with for and id
Implicit association by wrapping the control
Browser & runtime support
<label> is an original HTML element supported in every browser, with no caveats and no fallbacks to worry about. Both forms of association — the for attribute and wrapping — have worked reliably for decades, so the choice between them is purely about which reads better in your markup. There is no vendor prefix, no polyfill, and nothing to feature-detect; you can reach for a label on any project with complete confidence.
Frequently asked questions
What is the difference between the for attribute and wrapping a control?
for points at the control's id and lets the two live apart in the markup; wrapping nests the control inside the <label> so no id is needed. Use one or the other, never both.Does the for value point at the control's name or its id?
id. The label's for must match the control's id attribute exactly, and ids are case-sensitive. The name attribute is unrelated — it only governs how the value is submitted.Why does clicking my label not focus the input?
for value does not match any control's id, or the id is duplicated on the page. Check that exactly one control carries the matching id, or wrap the control inside the label instead.