<label>
A label for a form field.
Syntax
<label for="field-id">Label</label>Attributes
| Parameter | Type | Description |
|---|---|---|
| for | id | The `id` of the field the label belongs to. |
Examples
The label is linked to the field with for and id:
<label for="email">Email</label>
<input type="email" id="email">Or the field right inside the label:
<label>
<input type="checkbox"> Remember me
</label>Notes
Clicking the label focuses the field or toggles the checkbox, and screen readers read the label together with the field. The for value must match the field's id exactly.
See also
Related recipes
- How to add and style a field hint (placeholder)
- How to align form labels and fields
- How to change the look of a checkbox and a radio button
- How to group form fields
- How to make a field required
- How to make a hamburger menu without JavaScript
- How to make a page accessible
- How to make a range slider
- How to make tabs
- How to style a file input
In the tutorial
- Labels and field groups — The label tag and linking a label to a field with for and id, nested labels, grouping fields with fieldset and legend.