Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

The HTML <label> element represents a caption for an item in a user interface.

In the examples above you can see two form input examples — both with a corresponding <label>. This 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 screenreader 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, particular those using a touch-screen phone.

To associate the <label> with an <input> element in the above style, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

There is another style to consider. You can nest the <input> directly inside the <label>, in which case the for/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.
  • 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.

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.
Note: 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
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.

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 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.

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.
Permitted ARIA roles None
DOM interface HTMLLabelElement

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
forChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
form
Deprecated
Chrome Full support YesEdge Full support YesFirefox No support ? — 49IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android No support ? — 49Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

Other form-related elements: