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 a for attribute and a contained control element, as long as the for 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-only HTMLLabelElement.form attribute; it returns the form of which the label's associated control is a member, or null 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 the for 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.
  • When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.  

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 of a label. Doing so will make 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 will interfere with many kinds of assistive technology, as 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.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
for Yes Yes Yes Yes Yes Yes
form Yes Yes Yes — 49 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
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