Building web pages with XHTML 1.1

The purpose of this element is to attach a clickable label to a control.

Why is ordinary text not enough to label a control? Consider, for example, this fragment of a form, showing a checkbox with the text “Cumin” next to it:

  <div>
    <input type='checkbox' name='cumin'/> Cumin    
  </div>

The text “Cumin” identifies the checkbox, but the user can't click on that to set the checkbox. Only clicking on the checkbox itself sets it.

So the label element allows you to define a label that is associated with a form control. For checkboxes and radiobuttons, for example, the user can then set the control by clicking on the label as well as the checkbox or radiobutton symbol itself.

Here is the content model:

element label
{ attribute for { xsd:IDREF },
  attribute onfocus { text }?,
  attribute onblur { text }?,
  Common.attrib,
  Inline.model
}

Here is the above example redone with a label. The user will be able to set or clear the checkbox by clicking on the label.

  <div>
    <input type='checkbox' name='cumin' id='cumin-cb'/>
    <label for='cumin-cb'>Cumin</label>
  </div>