<label> supplies a caption for a labelable control. An explicit for matches the control’s unique id in the same document. Clicking the label can focus or toggle its control.
A working example
HTML and CSS
HTML
<label for="name">Full name</label
><input id="name" name="name" autocomplete="name" />CSS
/* Optional presentation */
label {
display: block;
margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
font: inherit;
max-width: 100%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Use it in a form
You can also wrap a single control in a label. Keep visible label text clear; a placeholder disappears as the person types. Use aria-describedby for extra instructions, not as a substitute for a name.
Common mistakes and accessibility
Do not nest labels or put another interactive control inside a label. A hidden input is not labelable. If the matching ID belongs to a non-labelable element, the association has no effect. Duplicate IDs can associate the wrong control.
Continue with input for the related behavior.
Sources and browser support
MDN: label describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.