What does "for" attribute do in HTML <label> tag?

The <label> tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:

One way is to wrap the label element around the input element:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

The other way is to use the for attribute, giving it the ID of the associated input:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

This is especially useful for use with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to hit the box itself.

Read more about the <label> element on MDN.

Associating text with an input is very important for accessibility, as it provides an accessible name for the input, so that assistive technology can provide it to users with disabilities. A screen reader would read the label text when the user focusses the input. You could also tell your voice command software to focus that input, but it needs a (visible) name for that.

Read more on Accessibility

---

The for attribute associates the label with a control element, as defined in the description of label in the HTML 4.01 spec. This implies, among other things, that when the label element receives focus (e.g. by being clicked on), it passes the focus on to its associated control. The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. (The association may not be as obvious as in visual rendering.)

In the first example in the question (without the for), the use of label markup has no logical or functional implication – it’s useless, unless you do something with it in CSS or JavaScript.

HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. This is described in the technical document H44: Using label elements to associate text labels with form controls, which also explains that the implicit association (by nesting e.g. input inside label) is not as widely supported as the explicit association via for and id attributes,

---

In a nutshell what it does is refer to the id of the input, that's all:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

---

Using label for= in html form

This could permit to visualy dissociate label(s) and object while keeping them linked.

Sample: there is a checkbox and two labels.

You could check/uncheck the box by clicking indifferently on any label or on checkboxes, but not on text nor on input content...

any label or

on checkboxes,

There is a label
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. Nullam venenatis gravida orci.
There is a 2nd label Demo 1

Some useful tricks

Same sample, but with two checkboxes and some different CSS effects (like writting in text: Select this or Deselect this reflecting checkbox state.).

By using stylesheet CSS power you can do a lot of interesting things...

body { background: #DDD; } .button:before { content: 'S'; } .box:before { content: '☐'; } label.button { background: #BBB; border-top: solid 2px white;border-left: solid 2px white; border-right: solid 2px black;border-bottom: solid black 2px; } #demo2:checked ~ .but2:before { content: 'Des'; } #demo2:checked ~ .but2 { background: #CCC; border-top: solid 2px black;border-left: solid 2px black; border-right: solid 2px white;border-bottom: solid white 2px; } #demo2:checked ~ .box2:before { content: '☒'; } #demo1:checked ~ .but1 { background: #CCC; border-top: solid 2px black;border-left: solid 2px black; border-right: solid 2px white;border-bottom: solid white 2px; } #demo1:checked ~ .but1:before { content: 'Des'; } #demo1:checked ~ .box1:before { content: '☒'; } Demo 1 Demo 2
elect 1 - elect 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
elect this 2nd label for box 1 - elect this other 2nd label for box 2

check 1 check 2

Usage sample: Toggle sidebar using CSS only (2nd snippet).

---

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

---

The for attribute shows that this label stands for related input field, or check box or radio button or any other data entering field associated with it. for example

<li>
    <label>{translate:blindcopy}</label>
    <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />

</li>

---

It labels whatever input is the parameter for the for attribute.

My 1st Radio Label
My 2nd Radio Label
My 3rd Radio Label

---