maxdesign.com.au

Published:

This article takes a look at the <label> element, including which elements need labeling, explicit vs implicit labeling, and more.

Which form elements need a <label>?

The <label> element is used to provide a visible text label and accessible name for some specific HTML elements such as:

Which form elements don’t need a <label>?

Many form-based elements don't require a <label>. In some of these cases, adding a <label> would either be invalid or confusing for assistive technologies.

For the <input> elements with a type of button, reset and submit, a label can be provided by the contents of the value attribute.

<input type="button" value="Login">
<input type="reset" value="Reset form">
<input type="submit" value="Submit">

For the <input> element with a type of image, a label can be provided by the contents of the alt attribute.

<input type="image" src="ball.png" alt="Ball">

For the <input> element with a type of hidden, there should be no associated <label> as this form control is never presented to the user.

<input type="hidden">

While it is allowed, the <button> does not require a <label> as its content be used instead.

<button>Content</button>

The <fieldset> must not have an associated <label>, as the contents of the <legend> provides its name.

<fieldset>
  <legend>Content</legend>
</fieldset>

The <legend> must not have an associated <label>, as it is used to provide a caption for the content of its parent <fieldset> element.

<fieldset>
  <legend>Content</legend>
</fieldset>

The <option> must not have an associated <label>, as its contents are used instead.

<label for="aaa">Choose a dinosaur:</label>
<select id="aaa">
  <option>Tyrannosaurus</option>
  <option>Velociraptor</option>
</select>

The <optgroup> must not have an associated <label>, as the contents of the label attribute are used instead.

<label for="aaa">Choose a dinosaur:</label>
<select id="aaa">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
  </optgroup>
</select>

The <datalist> must not have an associated <label>, as it should always be associated with a labeled <input>.

<label for="aaa">Choose a flavor:</label>
<input id="aaa" list="bbb">
<datalist id="bbb">
  <option value="Chocolate">
  <option value="Mint">
</datalist>

Explicit or implicit?

If a <label> is associated with any of these form controls, it should be explicitly associated via matching for and id values:

<label for="aaa">Name</label>
<input id="aaa" type="text">

Or, the form control can be implicitly associated if it is placed inside its <label>:

<label>
  Name
  <input type="text">
</label>

You can place form controls inside the label and also make them explicitly associated via matching for and id values:

<label for="aaa">
  Name
  <input id="aaa" type="text">
</label>

Label order

For <input> elements with a type of radio or checkbox, the <label> element must be positioned after the form control.

<input type="radio" id="yes">
<label for="yes">Yes</label>

For all other form controls, the <label> element must be positioned before the form control.

<label for="name">Full name</label>
<input type="text" id="name">

When form controls are positioned inside the <label>, the order of its content rather than the <label> itself becomes critical.

For <label> elements with a type of radio or checkbox, the <label> content must be positioned after the form control.

<label for="yes">
  <input type="radio" id="yes">
  Yes
</label>

For all other form controls, the <label> content must be positioned before the form control.

<label for="name">
  Full name
  <input type="text" id="name">
</label>

Which elements are allowed as descendants of the <label> element?

The <label> element only allows specific types of Phrasing content:

So, no flow elements are allowed as descendants of the <label>:

<label>
  <div></div>
</label>
<label>
  <p></p>
</label>

And a <label> is not allowed as a descendant of the <label>:

<label>
  <label></label>
</label>

Labelable elements, such as the <button>, <input>, <meter>, <output>, <progress>, <select> and <textarea> are allowed as descendants - but only if they are the element's labeled control.

So, adding a single instance of any of these elements inside the <label> is allowed.

<label>
  <input>
</label>

But the <label> cannot contain more than one of these elements, as they would not be the element's labeled control:

<label>
  <input>
  <input>
</label>

And that's it for the <label> element today!