label Element

Module

The label element is an inline element declared by the XHTML 1.1 Forms Module

Elements in the Forms Module are:
form | label | textarea | select | optgroup | option | button | fieldset | legend |
input type="button" | input type="checkbox" | input type="file" | input type="hidden" | input type="image" | input type="password" | input type="radio" | input type="reset" | input type="submit" | input type="text"

Description

A label element is used within a form to add a text label to a form control. This label is used to explain to the user the purpose of the form control (what is to be entered in a text field, what is represented by the checkbox or radio button, etc.).

There are two main methods of associating a label with a form control. The most flexible of these methods is to use the label element's for attribute, which should be given the value of the id attribute of the form control with which the label is to be associated. Alternatively, the associated form control may be nested within the label element itself.

<label for="emails">Check this box to be sent interesting emails:</label>
<input type="checkbox" id="emails" name="e" value="1" />

<label>Check this box to be sent interesting emails:
<input type="checkbox" name="e" value="1" />
</label>

These two examples should render identically.

Using label elements, rather than plain text, to label form controls is not only more semantically informative but also often allows the user to activate (or maybe just bring into keyboard focus) a control by using its label, instead of the control itself. This feature can significantly increase usability. For example, checkboxes and radio buttons (see input type="radio") are usually quite small and can be fiddly to click using a mouse - having the alternative of clicking on the label to achieve the same effect may be a big help.

#REQUIRED Attributes

There are no #REQUIRED attributes on the label element.

Specific Attributes

From the Forms Module - the Element's own Module

accesskey [ type Character ]

Accesskey for the label - when activated, focus is automatically passed to the associated form control

for [ type IDREF ]

The id of the form control with which this label is associated

From the Intrinsic Events Module

onblur [ type Script ]

Script to be executed when the element loses focus
Note: In many browsers, label elements cannot be tabbed to and never receive focus (any focus is merely passed on to the relevant form control) so the script in this attribute is never executed in these browsers.

onfocus [ type Script ]

Script to be executed when the element receives focus
Note: In many browsers, label elements cannot be tabbed to and never receive focus (any focus is merely passed on to the relevant form control) so the script in this attribute is never executed in these browsers.

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

( #PCDATA | input | select | textarea | button | InlStruct.class | InlPhras.class | InlPres.class | I18n.class | Anchor.class | InlSpecial.class | Misc.class )*

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of label

• #PCDATA
• From the Text Module: abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var
• From the Hypertext Module: a
• From the Forms Module: button, input, select, textarea
• From the Images Module: img
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Client-side Image Map Module: map
• From the Scripting Module: noscript, script
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object

Note: A label element must never contain another label element, at any nesting depth. See Descendant Exclusions.

Valid parents of label

• From the Text Module: abbr, acronym, address, cite, code, dfn, div, em, h1 - h6, kbd, p, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: fieldset, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt