HTML / HTML Tags

HTML <Label> Tag

Oct 12, 2022
2 min read
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>

Which of these is your favorite?

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>

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes