The HTML <label> tag
The HTML <label> element gives a form control a caption that is also its accessible name. Associate it either by wrapping the control, or by pointing the label's for attribute at the control's id. Clicking the label then focuses or toggles the control.
Overview
The <label> element ties a human-readable caption to a form control, and that association does two important jobs. It gives the control its accessible name, so screen readers announce what the field is for, and it extends the control's click target — clicking the words "Remember me" focuses or toggles its checkbox.
There are two ways to connect a label to its control. The explicit form points the label's for attribute at the control's id (<label for="email"> … <input id="email">). The implicit form wraps the control inside the <label>. The explicit form is the most robust — it keeps working even when the label and control are positioned far apart in the layout.
Every interactive control — <input>, <select>, <textarea> — should have a label, and a placeholder is not a substitute, since it disappears as the user types. One control gets one label; to caption a whole group of controls (a set of radio buttons), use a <fieldset> with a <legend> instead.
Syntax
<label for="email">Email</label>
<input id="email" type="email">Attributes
The <label> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
for |
A single element id (on <label>) or a space-separated list of ids (on <output>). |
Links a label to its form control by id. |
Example
<label><input type="checkbox"> Remember me</label>More Examples
Best practices
- Give every form control a
<label>— it provides the accessible name and a larger click target. - Prefer the explicit form (
<label for="id">) so the association survives layout changes. - Do not use a placeholder in place of a label; the hint vanishes once the user types.
- To caption a group of controls, use a <fieldset> and <legend> rather than a single label.
Accessibility
The <label> is the cornerstone of accessible forms: it provides the control's accessible name so screen readers announce "Email, edit text" instead of just "edit text". Ensure each control has exactly one associated label, that every for matches a real, unique id, and never rely on placeholder or nearby text alone.
Frequently asked questions
How do I associate a label with an input?
for attribute at the input's id: <label for="email">Email</label><input id="email">. Or wrap the input inside the <label>.What is the difference between for and wrapping the control?
for form is more robust because the label and control can be styled and positioned independently.