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.
|Content categories||Flow content, phrasing content, interactive content, form-associated element.|
|Permitted content||Phrasing content, but no descendant |
|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
In addition to the global attributes, this element supports the following attributes:
- A shortcut key to access this element from the keyboard.
- 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
forattribute is the labeled control for this label element.Note: A label element can have both a
forattribute and a contained control element, as long as the
forattribute points to the contained control element.
- 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.
This element implements the
<!-- 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>
Click events in nested
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