The HTML <label>
element represents a caption for an item in a user interface.
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 parents | Any element that accepts phrasing content. |
Permitted ARIA roles | None |
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
for
attribute is the labeled control for this label element.
A label element can have both afor
attribute and a contained control element, as long as thefor
attribute points to the contained control element. form
HTML5- 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.form
attribute; it returns the form of which the label's associated control is a member, ornull
if the label is not associated with a control or the control isn't part of a form.
Usage notes
- A
<label>
can be associated with a control either by placing the control element inside the<label>
element, or by using thefor
attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels. - Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
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 |
---|---|---|
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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | Yes | Yes | Yes |
for | Yes | Yes | Yes | Yes | Yes | Yes |
form | Yes | Yes | Yes — 49 | Yes | Yes | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
for | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
form | Yes | Yes | Yes | Yes — 49 | Yes | Yes | Yes |
See also
- Other form-related elements:
<form>
,<input>
,<button>
,<datalist>
,<legend>
,<select>
,<optgroup>
,<option>
,<textarea>
,<keygen>
,<fieldset>
,<output>
,<progress>
and<meter>
.
Document Tags and Contributors
Tags:
Contributors to this page:
teoli,
bunnybooboo,
danielcompton,
sideshowbarker,
erikadoyle,
Sheppy,
Krischan,
GunnarSturla,
vitaly-zdanevich,
Sebastianz,
marfire,
javier1nc,
SuperGeekJake,
Jeremie,
liborvalenta,
mkolodny,
jswisher,
mikemaccana,
kscarfone,
torbasow,
ethertank,
tregagnon,
tshinnic,
zuzusik,
medicdude,
metusf,
fscholz,
chrisjshull,
cers,
karbassi,
McGurk,
osdm,
Crash
Last updated by:
teoli,