HTML <Label> Tag

Definition

The <label> tag creates a caption for an item in a form or user interface.

Example

<p>Which of these is your favorite?</p>
<div>
    <label for="rocky1">Rocky? </label>
    <input type="checkbox" name="rocky1" id="rocky1">
</div>
<div>
    <label for="rocky4">Rocky IV? </label>
    <input type="checkbox" name="rocky4" id="rocky4">
</div>

Usage

• Both the opening and closing tags are required.
• A <label> element can’t be a descendant of another <label> element.
• The only descendant allowed is the labeled control. For example:

  <label for="rocky"><input type="checkbox" id="rocky" name="rocky"> Rocky</label>

  Rocky

Attributes

The <label> element supports the Global Attributes, as well as the following:

• for

  The for attribute specifies the id attribute of the form element that the label is bound to. This allows you to activate the control when the label is clicked.

• form

  The form attribute specifies which form the label belongs to.

Best Practices

• Do not place heading elements within a <label> element as they can interfere with assistive technology such as screen readers. If a form or section of a form requires a title you should use a <legend> tag.
• Do associate a label with an <input> element with type=button as this can interfere with assistive technology such as screen readers.
• Do not place anchors or buttons inside a label as this makes it difficult to active the form input via the <label>.
• Be sure to correctly use the for attribute to ensure that clicking the label activates the control.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile