<label>: The Label element #
::: section-content
The <label>
HTML element represents a caption for an item
in a user interface.
:::
Try it #
::: section-content ::: iframe ::: {.output-header .border-rounded-top}
HTML Demo: <label> #
Reset :::
::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::
::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::
::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML
CSS
JavaScript :::
::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}
<div class="preference">
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />
::: :::
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} .preference { display: flex; justify-content: space-between; width: 60%; margin: 0.5rem; } ::: :::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::
::: {#output .output-container}
Output #
::: :::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output #
![] clear console
::: {#console .console} ::: :::
::: {#html-output .output .editor-tabbed} %html-content% ::: :::
Associating a <label>
with a form control, such as
<input>
or
<textarea>
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.
- When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.
To explicitly associate a <label>
element with an <input>
element,
you first need to add the id
attribute to the <input>
element. Next,
you add the for
attribute to the <label>
element, where the value of
for
is the same as the id
in the <input>
element.
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:
::: code-example [html]{.language-name}
<label>
Do you like peas?
<input type="checkbox" name="peas" />
</label>
:::
The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:
::: code-example [html]{.language-name}
<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>
:::
Elements that can be associated with a <label>
element include
<button>
,
<input>
(except for type="hidden"
),
<meter>
,
<output>
,
<progress>
,
<select>
and
<textarea>
.
:::
Attributes #
::: section-content This element includes the global attributes.
for
The value of the
for
attribute must be a singleid
for a labelable form-related element in the same document as the<label>
element. So, any givenlabel
element can be associated with only one form control.::: {#sect1 .notecard .note} Note: To programmatically set the
for
attribute, usehtmlFor
. :::The first element in the document with an
id
attribute matching the value of thefor
attribute is the labeled control for thislabel
element — if the element with thatid
is actually a labelable element{target="_blank"}. If it is not a labelable element, then thefor
attribute has no effect. If there are other elements that also match theid
value, later in the document, they are not considered.Multiple
label
elements can be given the same value for theirfor
attribute; doing so causes the associated form control (the form control thatfor
value references) to have multiple labels.::: {#sect2 .notecard .note} 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 #
::: section-content
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 #
Defining an implicit label #
::: section-content ::: code-example [html]{.language-name}
<label>Click me <input type="text" /></label>
:::
::: {#sect3 .code-example} ::: iframe ::: ::: :::
Defining an explicit label with the "for" attribute #
::: section-content ::: code-example [html]{.language-name}
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
:::
::: {#sect4 .code-example} ::: iframe ::: ::: :::
Accessibility concerns #
Interactive content #
::: section-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 do this:
::: code-example [html]{.language-name}
<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>
:::
Prefer this:
::: code-example [html]{.language-name}
<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 #
::: section-content
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 do this:
::: code-example [html]{.language-name}
<label for="your-name">
<h3>Your name</h3>
<input id="your-name" name="your-name" type="text" />
</label>
:::
Prefer this:
::: code-example [html]{.language-name}
<label class="large-label" for="your-name">
Your name
<input id="your-name" name="your-name" type="text" />
</label>
::: :::
Buttons #
::: section-content
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 #
::: section-content
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 #
::: _table #
Specification #
HTML Standard
[#
the-label-element]{.small}
:::
Browser compatibility #
::: _table Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
label
1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0
for
1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0
:::
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label{._attribution-link}
:::