The for attribute on a label binds (associates) that label to an input element.
Clicking the label places focus on the associated input element.
Elements that accept this attribute include <label>, and <output>.
A for attribute on 2 <label> elements.
Clicking a label will check the associated radio button.
<form action="/tutorial/action.html">
<fieldset>
<legend>Payment Method</legend>
<label for="credit">
<input type="radio" name="card" id="credit" value="credit" checked> Credit Card
</label><br />
<label for="debit">
<input type="radio" name="card" id="debit" value="debit"> Debit Card
</label><br />
<input type="submit" value="Submit">
</fieldset>
</form>
For additional details see our HTML label for Reference.
The for attribute on a label or output element specifies the id of an input element it is bound to.
Clicking the label places focus on the input element.
Clicking the label of a radio button or checkbox will also check (select) the element.
<tagname for="element-id" >
| Value | Description |
|---|---|
| element-id | id of the input control that the element is bound to. |
The following elements accept the for attribute.
| Elements | Description | |
|---|---|---|
| <label> | Specifies a label -- see example above | |
| <output> | Represents a result of calculation. |
An <output> tag with a for attribute.
The for attribute binds the output to the input control. Move the slider to see the output change.
<form oninput="result.value = slider.value">
<input type="range" id="slider" value="25">
<br /><br />
The value is <output name="result" for="slider">25</output>
</form>
For additional details see our HTML output for Reference.
Here is when for support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
