Menu
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'?
624
The for attribute is used in labels. It refers to the id of the element this label is associated with. Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select> .
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.
A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control. The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.
The <label> tag defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element. The <label> tag can be used in two ways: Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a for attribute whose value is the same as input id.
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.
135
When you click on the label (Male), the radio will be checked something not possible if you are not using a label. A label is also useful when developing for small devices such as mobiles.
So, it is useful for:
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
