HTML for Attribute

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>.

Example

#

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> &nbsp;Credit Card
    </label><br />
    <label for="debit">
      <input type="radio" name="card" id="debit" value="debit"> &nbsp;Debit Card
    </label><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

For additional details see our HTML label for Reference.

Using for

#

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.

Syntax

#

<tagname for="element-id" >

Values

#

Value	Description
element-id	id of the input control that the element is bound to.

Elements that accept for

#

The following elements accept the for attribute.

	Elements	Description
	<label>	Specifies a label -- see example above
	<output>	Represents a result of calculation.

<output> with for

#

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.

Browser support

#

Here is when for support started for each browser: