HTML for Attribute

The for attribute on a label or output element binds (associates) the element to an input element. Clicking the label places focus on the 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.

Payment Method

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



The value is 25
<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:

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

You may also like



Guides