Require label for attribute to reference a labelable form control

Rule ID:

valid-for

Category:

Document

Standards:

• HTML5

Fixable:

No

The <label> element's for attribute must reference a labelable form control.

According to the HTML specification, the for attribute should reference elements that can be labeled, such as:

• <input> (except type="hidden")
• <textarea>
• <select>
• <button>
• <output>
• <meter>
• <progress>

Rule details

Examples of incorrect code for this rule:

<div>
  <label for="foo">Lorem ipsum</label>
  <p id="foo">dolor sit amet</p>
</div>

error: <label> "for" attribute must reference a labelable form control (valid-for)
  1 | <div>
> 2 |   <label for="foo">Lorem ipsum</label>
    |               ^^^
  3 |   <p id="foo">dolor sit amet</p>
  4 | </div>


1 error found.

Examples of correct code for this rule:

<div>
  <label for="foo">Lorem ipsum</label>
  <input type="text" id="foo" />
</div>

Version history

• 10.6.0 - Rule added.