Reviewing form controls that do not require labels

There are many form-based elements that do not require a <label> element. In many of these cases, adding a <label> element would either be invalid, or confusing for assistive technologies.

type="button", type="reset" and type="submit"

For the <input> elements with a type of button, reset and submit, the name is provided by the value attribute, so these input types do not require associated <label> elements.

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

type="image"

For the <input> element with a type of image, the name is provided by the alt attribute, so this input types do not require an associsted <label> element.

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

type="hidden"

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

<input type="hidden">

<button>

The <button> does not require a <label> element as its content acts as a <label> element.

<button>Content</button>

<fieldset>

The <fieldset> does not require a <label> element as the <legend> acts as a <label> element.

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

<legend>

The <legend> does not require a <label> element.

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

<optgroup>

The <optgroup> does not require a <label> element as the label attribute provides a name.

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

<option>

The <option> does not require a <label> element as its content acts as a <label> element.

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

<datalist>

The <datalist> does not require a <label> element as it is always associated with an <input>, which should have it’s own label.

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

<form>

The <form> does not require a <label> element.

<form></form>

Testing home