Next / Previous / Contents / TCC Help System / NM Tech homepage

14.2. The label element: Label a control

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
}
for

To link this label to a control, define an id attribute on that control, and then include a for attribute on the label that specifies that same id value.

onfocus, onblur

Actions to be taken when the element gains or loses focus; see Section 16, “Event attributes”.

Common.attrib

You can use any of the attributes from Section 15.3, “The common attributes: Common.attrib.

Inline.model

Inside the label you can use any mixture of text and inline elements; see Section 10, “Inline content: 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>