The label element

Definition

label is a caption for a labelable form control. It provides a persistent visible name, contributes to the control's accessible name, and usually lets a person click or tap the label to focus or activate the associated control.

Explicit association

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" />

The for value must match one control's id in the same document. This pattern survives flexible layouts because the label does not need to wrap the control.

Implicit association

A control can also be nested inside its label. Explicit association is often easier to inspect and style, while nesting can be concise for checkboxes and radio buttons. Do not combine multiple labelable controls inside one label or place unrelated interactive elements such as links inside it.

Browser and accessibility behavior

Activating a label normally forwards activation to its control. A screen reader uses the label text when announcing the field. Placeholder text, a nearby paragraph, visual alignment, and the name attribute do not create the same association. aria-label can supply a name where no visible label is practical, but hiding the name from sighted users is rarely appropriate for ordinary form fields.

Common failures

• for points to a missing or duplicated id.
• Placeholder text is the only visible instruction and disappears during entry.
• One label appears visually near several controls without naming each one.
• Required state or units are visible but excluded from the label and description relationship.

Verification checklist

Click every label and confirm the intended field receives focus or changes state. Inspect the accessibility tree for the expected name. Fill the form and verify the label remains visible. Test error state, zoom, autofill, and narrow reflow. If additional help or error text is necessary, associate it separately without turning the label into a paragraph of instructions.

Repeat the check after client-side validation and server rejection. Dynamic markup must not duplicate IDs, replace the visible label, or leave an error pointing at a stale control. Test voice input where practical because visible and accessible names should agree.