The HTML <label>
element represents a caption for an item in a user interface.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Associating a <label>
with an <input>
element offers some major advantages:
- The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
- You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.
To associate the <label>
with an <input>
element, you need to give the <input>
an id
attribute. The <label>
then needs a for
an attribute whose value is the same as the input's id
.
Alternatively, you can nest the <input>
directly inside the <label>
, in which case the for
and id
attributes are not needed because the association is implicit:
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
Other usage notes:
- The form control that the label is labeling is called the labeled control of the label element. One input can be associated with multiple labels.
- When a
<label>
is clicked or tapped and it is associated with a form control, the resultingclick
event is also raised for the associated control.
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 element in the document with anid
matching the value of thefor
attribute is the labeled control for this label element if it is a labelable element. If it is not labelable then thefor
attribute has no effect. If there are other elements that also match theid
value, later in the document, they are not considered.Note: A
<label>
element can have both afor
attribute and a contained control element, as long as thefor
attribute points to the contained control element.
Styling with CSS
There are no special styling considerations for <label>
elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span>
or <a>
element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
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">
Accessibility concerns
Interactive content
Don't place interactive elements such as anchors or buttons inside a label
. Doing so makes it difficult for people to activate the form input associated with the label
.
Don't
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
Do
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the Terms and Conditions
</label>
<p>
<a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
Headings
Placing heading elements within a <label>
interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label>
element instead.
If a form, or a section of a form needs a title, use the <legend>
element placed within a <fieldset>
.
Don't
<label for="your-name">
<h3>Your name</h3>
<input id="your-name" name="your-name" type="text">
</label>
Do
<label class="large-label" for="your-name">
Your name
<input id="your-name" name="your-name" type="text">
</label>
Buttons
An <input>
element with a type="button"
declaration and a valid value
attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button>
element.
Technical summary
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. |
Implicit ARIA role | No corresponding role |
Permitted ARIA roles | No role permitted
|
DOM interface | HTMLLabelElement
|
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<label>' in that specification. | Living Standard | |
HTML5The definition of '<label>' in that specification. | Recommendation | |
HTML 4.01 SpecificationThe definition of '<label>' in that specification. | Recommendation | |
[https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1 HTML 4.0 Specification
The definition of '<label>' in that specification.] |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
label
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support Yes |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support Yes |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
for
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support Yes |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support Yes |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
<label> by Mozilla Contributors is licensed under CC-BY-SA 2.5.