The for attribute connects a <label> to a form control by matching that control’s id. Users can click the label text to focus the field or toggle a checkbox, and screen readers announce the connection clearly.
Primary use case.
for equals id value.
Bigger tap area.
Toggle on label click.
JS property name.
Wrap input option.
forThe primary purpose of the for attribute is to establish an explicit relationship between a label and a form control. When the values match, the browser treats the label as belonging to that control.
This improves accessibility because assistive technologies read the label when the control receives focus. It also improves usability: clicking label text focuses text inputs or toggles checkboxes and radio buttons, giving users a larger click target.
The value of for must exactly equal the id of one labelable element on the page. Duplicate ids break the association.
Add for to a <label> and set the linked control’s id to the same value:
<label for="username">Username:</label>
<input type="text" id="username" name="username"><label> (and <output> for different purposes).id of a labelable form-associated element.id must be unique within the document.for.The for attribute takes a single string: the id of the associated control.
for="email" with <input id="email">for="message" with <textarea id="message">for="country" with <select id="country"><label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" id="subscribe" name="subscribe">| Item | Details | Notes |
|---|---|---|
| Element | <label> | Primary use |
| Value | Control id | Case-sensitive match |
| Click behavior | Focus or toggle control | Larger hit target |
| JS property | label.htmlFor | Not for in JS |
| Alternative | Wrap input in label | Implicit association |
| Also on | <output> | References related elements |
| Element | Supported? | Notes |
|---|---|---|
<label> | Yes | Links label text to one control |
<output> | Yes | Lists ids of elements that label the output |
<input>, <select> | No | Controls use id; labels use for |
| Approach | Markup | When to Use |
|---|---|---|
Explicit (for) | <label for="x"> + <input id="x"> | Label and input are separate in layout |
| Implicit (wrapped) | <label>Text <input></label> | Simple forms; no id required |
Basic label association, a login form with multiple labels, and dynamic htmlFor in JavaScript.
Match for on the label with id on the input:
<label for="username">Username:</label>
<input type="text" id="username" name="username">The for attribute value username matches the input’s id. The browser connects them so the label activates the control.
Each field gets its own label with a matching for and id pair:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>Every visible field has a programmatic label. Screen readers announce “Email” when the email field is focused, and users can click either label to jump to its field.
Update the association at runtime with the htmlFor property:
<label id="dynamicLabel" for="fieldA">Field A:</label>
<script>
document.getElementById("dynamicLabel").htmlFor = "fieldB";
</script>Setting htmlFor re-points the label to a different control. Useful when UI layout changes dynamically or when reusing one label element in a wizard step.
for + id or wrap the control inside <label>.Label for value matches control id.
Accessibility tree records the relationship.
Control receives focus or toggles state.
Clear names for fields and larger click targets for everyone.
The for attribute on <label> is supported in all modern browsers. It has been a core HTML feature for decades.
All major browsers honor for on label elements.
Bottom line: Always associate labels with controls using for or implicit wrapping.
The for attribute is essential for accessible HTML forms. It links label text to form controls, improves keyboard and screen reader support, and gives users a larger area to click or tap.
Pair every for with a matching id, or wrap controls inside labels when layout allows. Use htmlFor in JavaScript when you need to change the association dynamically.
forBookmark these before building your next form.
Not on input.
ScopeExact string match.
ValueFocus or toggle.
UXJS property name.
ScriptImplicit labels.
A11yid. Clicking the label focuses or activates that control.<label>. The <output> element also has a for attribute with a different purpose (listing related element ids).id of the linked control, such as for="email" with <input id="email">.labelElement.htmlFor = "newId". The property name is htmlFor, not for.<label> creates an implicit association without for.for works in all modern and legacy browsers.Practice linking labels to inputs with for and matching id values in the Try It editor.
3 people found this page helpful