HTML for Attribute

HTML for Attribute

The HTML for attribute creates an association between certain elements. It is most commonly used on the <label> element to associate a label with a form control and on the <output> element to identify the controls that contribute to the output value.

Syntax

On a <label> element, the for value must match the id of the form control the label describes.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

On an <output> element, the value is a space-separated list of id values identifying elements that contributed to the calculation or result.

<output for="quantity price">0</output>

Elements That Use the for Attribute

The meaning of the for attribute depends on the element where it is used.

Using for with <label>

The most common use of for is to explicitly associate a <label> with a form control.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Selecting the label generally moves focus to the associated control or activates it, depending on the type of control. This also gives browsers and assistive technologies an explicit relationship between the label text and the control.

Matching the id Attribute

For a <label>, the for value must match the id of a labelable element in the same document.

<label for="newsletter">Subscribe to newsletter</label>
<input type="checkbox" id="newsletter" name="newsletter">

The for="newsletter" value points to the element with id="newsletter". The control's name does not create this association.

Using for with <output>

On an <output> element, the for attribute specifies the elements whose values contributed to the result represented by the output.

<input type="number" id="quantity" name="quantity">
<input type="number" id="price" name="price">
<output for="quantity price">0</output>

Unlike the single identifier used by a <label>, an <output> can reference multiple elements.

Multiple Controls

The for attribute on <output> accepts a space-separated list of element IDs.

<output for="width height">Result</output>

In this example, the output is associated with the elements whose IDs are width and height. The order of the IDs does not perform a calculation; JavaScript or other application logic is still needed to calculate and update the output value.

Labels and Accessibility

Explicitly associating a label with a form control helps users understand the purpose of the control and allows assistive technologies to identify its label. It also increases the clickable or tappable area because users can select the label text to interact with its associated control.

A form control can also be associated with a label by placing the control inside the <label> element, but the for and id method provides an explicit association and allows the label and control to be separate in the markup.

Common Mistakes

Do not use the control's name as the target of a label's for attribute unless the same value is also its id. The association is made using the element's id.

Do not assign a space-separated list of controls to a <label>. A label's for attribute identifies a single labelable element, while <output> can reference multiple elements.

Make sure referenced id values are unique within the document so the intended associations are unambiguous.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The for attribute is widely supported on the elements where it applies. It associates a <label> with a form control and can also associate an <output> element with controls that contributed to its value.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the for Attribute

The example explicitly associates labels with form controls. Select the label text and notice that its associated control receives focus or changes state.

Summary

The HTML for attribute creates associations between certain elements. On <label>, it identifies the labelable form control described by the label by matching the control's id. On <output>, it contains a space-separated list of IDs identifying elements that contributed to the output value.