The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
It's worth noting, however, that labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
Prior to a revision to the HTML specification made on April 28, 2016, the <label> element's form attribute allowed directly associating labels with forms.
| Content categories | Flow content, phrasing content, interactive content, form-associated element, palpable content. |
|---|---|
| Permitted content | Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parent elements | Any element that accepts phrasing content. |
| DOM interface | HTMLLabelElement |
Attributes
This element includes the global attributes.
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
forattribute is the labeled control for this label element.A label element can have both aforattribute and a contained control element, as long as theforattribute points to the contained control element. formHTML5- The form element with which the label is associated (its form owner). If specified, the value of the attribute is the ID of a
<form>element in the same document. This lets you place label elements anywhere within a document, not just as descendants of their form elements.This content attribute was removed from the HTML specification on April 28, 2016. However, scripts still have access to a read-onlyHTMLLabelElement.formattribute; it returns the form of which the label's associated control is a member, ornullif the label is not associated with a control or the control isn't part of a form.
Examples
Simple label example
<label>Click me <input type="text"></label>
Using the "for" attribute
<label for="username">Click me</label> <input type="text" id="username">
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<label>' in that specification. |
Living Standard | |
| HTML5 The definition of '<label>' in that specification. |
Recommendation | |
| HTML 4.01 Specification The definition of '<label>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes)[1] | (Yes) | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes)[1] | (Yes) | (Yes) | (Yes) |
[1] 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).
[2] The HTML specification was updated in April 2016 to deprecate the form attribute. It's still available from script, but its definition has changed: it now returns the associated control's form, or null if there is no associated control (that is, if HTMLLabelElement.control is null). See HTMLLabelElement.form.
This change is implemented in Firefox 49.
See also
- Other form-related elements:
<form>,<button>,<datalist>,<legend>,<select>,<optgroup>,<option>,<textarea>,<keygen>,<fieldset>,<output>,<progress>and<meter>.