label

Table of contents

  1. 1. Summary
  2. 2. Usage context
  3. 3. Attributes
  4. 4. DOM Interface
  5. 5. Examples
      1. 5.1.1. Result
  6. 6. Notes
      1. 6.1.1. Click events in nested <label> elements
  7. 7. See also
Page Notifications Off

Summary

The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by using the for attribute, or by placing the control element inside the label element. Such a control is called the labeled control of the label element.

Usage context

Content categories Flow content, phrasing content, interactive content, form-associated element.
Permitted content Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed. 
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parent elements Any element that accepts phrasing content.
Normative document HTML 5, Section 4.10.6
HTML 4, Section 17.9.1

Attributes

In addition to the global attributes, this element supports the following attributes:

accesskey HTML 4 , Obsolete  in HTML5
A shortcut key to access this element from the keyboard.
for
The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
Note: A label element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
form HTML5
The form element that the label element is associated with (its form owner). The value of the attribute must be an ID of a <form> element in the same document. If this attribute is not specified, this <label> element must be a descendant of a <form> element. This attribute enables you to place label elements anywhere within a document, not just as descendants of their form elements.

DOM Interface

This element implements the HTMLLabelElement interface.

Examples

<!-- Simple label example with for attribute -->
<input type="radio" name="clickmebutton" id="clickmebutton"> <label for="clickmebutton">Click me</label>

<!-- or more simply -->
<label><input type="radio" name="clickmebutton"> Click me</label>

Result

Notes

Click events in nested <label> elements

Starting with Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) , a bubbling click event triggers at most one <label>, and the synthetic click event cannot trigger additional <label>s. In Gecko, a click event will still bubble up past a <label>, while in WebKit or Internet Explorer the click event will stop at the <label>. The behavior prior to Gecko 8.0 (triggering multiple <label>s) caused Firefox to stop responding (see bug 646157 ).

See also

Other form-related elements: <form> , <button> , <datalist> , <legend> , <select> , <optgroup> , <option> , <textarea> , <keygen> , <fieldset> , <output> , <progress> and <meter> .

Tags (4)

Edit tags

Attachments (0)

 

Attach file