The <label> Tag

Labels are used to attach captions to form controls. This can be done in one of two ways.

• By placing the form control inside the label. For example
  <label>Your Name<input type="text" /></label> or
• By assigning the id for the associated form control to the for attribute of the label.
  <label for="urname">Your Name</label>
<input type="text" id="urname" />

Clicking on the label transfers focus to the associated control. If the associated control is a checkbox or a radio button the checked state of the control gets toggled. Labels are particularly useful with checkboxes and radio buttons since they provide a larger and more intuitive clickable area for the control. It is worth noting that the label does not become clickable in IE6 if the first code format above is used.

Needless to say, labels can be styled using the class attribute or using inline styling via the style attribute. One can also assign an id to the label to make it available for manipulation via JavaScript.