Regarding the HTML Label's "For" Property

html label
user328414 picture user328414 · Jun 29, 2010 · Viewed 35.1k times · Source

Considering the following 2 lines of code (copied from w3schools.com > "HTML < label > for Attribute"):

  <label for="male">Male </label>
  <input type="radio" name="sex" id="male" />

I am having trouble discovering the exact purpose of the above label's "for" property. As you can see it is currently set to "male" (to match the id of the input control).

All I have read so far is that the above code will 'associate' and 'bound' the label with the input control. So my question is, what exactly does this mean?

What exactly are the results of associating the label to the input control?
Does the label and/or input have new behaviours as a result of this 'association'?

Answer

ceejayoz picture ceejayoz · Jun 29, 2010

A label that is associated with a control via for will be clickable. Clicking it selects the control. Highly useful with radio/checkboxes in particular. It also has accessibility implications for screen readers for the visually impaired.

Related questions

How to create a checkbox with a clickable label?

How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?

Read More
How to change the text of a label?

I have a radiobutton list and on click on the radio button item I have to change the text of its label. But for some reason it's not working. Code is below: <asp:Label ID="lblVessel" Text="Vessel:" runat="…

Read More
Change label text using JavaScript

Why doesn't the following work for me? <script> document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!'; </script> <label id="lbltipAddedComment"></label>

Read More