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



A for attribute on 2 <label> elements.
Clicking a label will check the associated radio button.

Payment Method

<form action="/tutorial/action.html">
    <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">

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.


<tagname for="element-id" >



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>

For additional details see our HTML output for Reference.

Browser support

Here is when for support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

Last updated on Sep 30, 2023