The HTML for attribute
In short
The HTML for attribute associates the label (or output) with a form control by its id. It is used on the <label> and <output> elements.
Overview
The for attribute links a label to its form control by id. It is used on the <label> and <output> elements.
It is a form-control attribute: it configures how a control behaves, what it accepts, or its initial value, working alongside the control's <label> and parent <form>. Constraint attributes also feed the browser's built-in validation.
Syntax
<label for="email">Email</label> <input id="email">Values
| Value |
|---|
A single element id (on <label>) or a space-separated list of ids (on <output>). |
Best practices
- Give every control a <label> so it has an accessible name.
- Treat client-side constraints as a convenience. Always validate again on the server, since they can be bypassed.
- Choose the most specific input type so users get the right on-screen keyboard and built-in checks.
- Keep the submitted name and value meaningful for whatever processes the form.
Accessibility
A <label for> pointing to an input's id gives the control an accessible name and makes the label clickable, a fundamental accessibility pattern.
Frequently asked questions
What does the for attribute do?
Links a label to its form control by id.
Are HTML form attributes enough for validation?
They give instant feedback, but client-side checks can be bypassed, so always validate on the server too.
Do form controls still need a label?
Yes. Every control needs a <label> for an accessible name, whatever attributes you set.
Which elements use the for attribute?
It is an element-specific attribute, used on the
<label> and <output> elements.
