HTMLLabelElement: htmlFor property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The htmlFor property of the HTMLLabelElement interface is the ID of the associated label's control element. It reflects the value of, and is used to set and get the for content attribute.
Value
A string that contains the ID of the element associated with the control.
Description
An HTMLLabelElement should be associated with a control element so that clicking on the label activates the control. The for attribute, reflected in the htmlFor property, should contain the id of the associated control element.
Note:
If this property has a value, the HTMLLabelElement.control property must refer to the same control.
The htmlFor attribute provides JavaScript access to the for attribute value. htmlFor is used instead of for to avoid clashing with the JavaScript for reserved word (this is no longer strictly necessary, so may change in the future).
Example
Basic usage
In this example, the <label> element's for attribute value is username, which is linked to the <input> via its id attribute. We use the htmlFor DOM property to access the for attribute value.
<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
document.querySelector("label").htmlFor;
// username
Specifications
| Specification |
|---|
| HTML # dom-label-htmlfor |