<label>

The <label> 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

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

Other form-related elements:

• <form>
• <input>
• <button>
• <datalist>
• <legend>
• <select>
• <optgroup>
• <option>
• <textarea>
• <keygen>
• <fieldset>
• <output>
• <progress>
• <meter>