The label tag defines a label to a control. When the text within the label is clicked, it will toggle the control. The <label> tag in HTML is exactly similar to the <label> tag in XHTML.
Attribute of Label Tag - For
It defines the form element to which the label is associated. The text used in for attribute in label, should be same as the text in the id attribute of the control.
Example
<label for="moreinfo">Do you want more information?</label>
<input type=checkbox name="moreinfo" id="moreinfo" />
Labels may be hidden from the display by using display:none. This has the effect of not rendering the label on screen but, because it's in a form, screen readers will still read the label aloud. Note this technique only applies to form elements and that labels should be visible wherever possible.
There are two steps to utilizing the <label> element for making your forms more accessible, and both are in place in Method C. The first step is to use <label> tags to associate the label text with its corresponding form control, whether it be a text field, text area, radio button, check box, etc. Method C uses <label> on the "Name:" and "Email:" headers to couple it with text input boxes that will contain that information.
The second step is adding the for attribute to the <label> tag as well as a matching id attribute to the form control it belongs to.
For instance, in Method C we wrap the <label> tag around Name: with the value of the for attribute that matches the value of the id for the text field that follows.
Why <label>?
Perhaps you’ve heard others tell you that you should always add <label> tags to your forms. The important question to ask (always) is why you should use <label> tags.
Creating label/ID relationships allows screen readers to properly read the correct label for each form control—regardless of where each falls within the layout. That’s a good thing. Also, the <label> tag was created to mark up form labels, and by utilizing it we’re adding structure to the form by adding meaning to these components.
An additional benefit to using <label> tags when dealing with radio button or check box controls is that most browsers will toggle the control on or off when the user clicks the text contained within the <label>. This in turn creates a larger clickable area for the control, making it easier for mobility-impaired users to interact with the form (Mark Pilgrim, “Dive Into Accessibility,” http://diveintoaccessibility.org/ day_28_labeling_form_elements.html).
The <label> tag defines a label for an input element.
The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
The label element associates a label with form controls such as input, textarea, select and object. This association enhances the usability of forms. For example, when users of visual Web browsers click in a label, focus is automatically set in the associated form control. For users of assistive technology, establishing associations between labels and controls helps clarify the spatial relationships found in forms and makes them easier to navigate.
The association between a label and a form control can also be made implicitly, if the label element contains both the label text and the form control.
Some form controls automatically have labels associated with them (buttons) while most do not (text boxes, checkboxes, radio buttons, text areas, and menus). The <label> tag is used to define a label for XHTML form controls that do not have implicit labels. If you click the text within the label element, it toggles the control.
The "for" attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the "id" attribute of the associated control element. More than one <label> may be associated with the same control by creating multiple references via the for attribute.
The text between the opening and closing <label> tag becomes the label for the control. If the <label> tag is coded to the left of the control, the label appears on the left. On the other hand, if the <label> tag is coded to the right of the control, the label appears on the right.
All visible form controls except buttons should have an associated label element (buttons are self-labelling). The label element can be associated with its form control either implicitly or explicitly.
An implicit association is created by putting the form control inside the label element, while an explicit association is created by giving the label element a for attribute with the same value as the form control’s id attribute.
Just by adding the <label> tag to each text input element, we'd be noticeably enhancing accessibility levels.
As you can see, we've wrapped every form input element using a <label> tag to associate the text element with the corresponding element. Another possible way to implement this tag would be assigning an id to the form control and then applying that id value to the "for" attribute of the
In the last example, we've defined the "for" attribute for each <label> element and assigned the id value corresponding to each <input> element. In thi way we provide the proper association between the text and the form control. This last approach is necessary when we have physically separated the <label> element from the form control tag itself in the source code.