<label>: The Label element
<label> HTML element represents a caption for an item in a user interface.
<label> with a form control, such as
<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
Alternatively, you can nest the
<input> directly inside the
<label>, in which case the
id attributes are not needed because the association is implicit:
<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:
<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
<input> (except for
This element includes the global attributes.
The value of the
forattribute must be a single
idfor a labelable form-related element in the same document as the
<label>element. So, any given
labelelement can be associated with only one form control.
Note: To programmatically set the
The first element in the document with an
idattribute matching the value of the
forattribute is the labeled control for this
labelelement — if the element with that
idis actually a labelable element. If it is not a labelable element, then the
forattribute has no effect. If there are other elements that also match the
idvalue, later in the document, they are not considered.
labelelements can be given the same value for their
forattribute; doing so causes the associated form control (the form control that
forvalue references) to have multiple labels.
<label>element can have both a
forattribute and a contained control element, as long as the
forattribute points to the contained control element.
Styling with CSS
Defining an implicit label
<label>Click me <input type="text" /></label>
Defining an explicit label with the "for" attribute
<label for="username">Click me to focus on the input field</label> <input type="text" id="username" />
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 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>
<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>
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
<label for="your-name"> <h3>Your name</h3> <input id="your-name" name="your-name" type="text" /> </label>
<label class="large-label" for="your-name"> Your name <input id="your-name" name="your-name" type="text" /> </label>
|Content categories||Flow content, phrasing content, interactive content, form-associated element, palpable content.|
Phrasing content, but no descendant
|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
|HTML Standard |
BCD tables only load in the browser