Labels
Connect a label to an input for better usability.
Syntax
<label for="name">Name</label>
<input id="name">The <label> element describes an input control. Linking a label to its input improves accessibility and lets users click the label to focus the field.
How to link them
Match the label's for attribute to the input's id.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer links every form input to a <label> so clicking the label text also focuses the input field.
- An accessibility engineer ensures all inputs have visible <label> elements so screen readers announce the field name.
- A form with radio buttons uses <label> for each option so users can click the text, not just the small circle.
More examples
Label linked by for and id
for="username" links the label to the input with id="username"; clicking the label focuses the input.
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="johndoe">Wrapping label around input
Wrapping the input inside <label> creates the link implicitly; no for/id pairing is needed.
<label>
Subscribe to newsletter
<input type="checkbox" name="newsletter" value="yes">
</label>Labels for a radio group
Each radio option has its own label; <fieldset> and <legend> group them with a shared accessible title.
<fieldset>
<legend>Preferred contact method</legend>
<label>
<input type="radio" name="contact" value="email"> Email
</label>
<label>
<input type="radio" name="contact" value="phone"> Phone
</label>
<label>
<input type="radio" name="contact" value="sms"> SMS
</label>
</fieldset>
Discussion