The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.

The <label> element associates descriptive text with a specific form control, enabling users to click the label to focus or activate the associated input. The for attribute creates this link by referencing the id of the target form control. When the referenced id doesn’t correspond to a valid, non-hidden form control, the label becomes orphaned — it isn’t associated with anything meaningful.

The W3C validator raises this error in several scenarios:

• The for attribute references an id that doesn’t exist in the document.
• The for attribute references an element that isn’t a labelable element (such as a <div> or <span>).
• The for attribute references an <input type="hidden">, which is not a visible form control and cannot be labeled.
• There’s a typo or mismatch between the for value and the intended element’s id.

Labelable elements in HTML include <input> (except type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, and <progress>.

This matters for accessibility because screen readers rely on the for/id association to announce what each form control represents. Without a valid association, users who depend on assistive technology may not understand what a form field is asking for. It also impacts usability — a properly linked label expands the clickable area for the form control, making it easier to interact with, especially on touch devices and for users with motor impairments.

To fix this issue, verify that the for attribute value exactly matches the id of a visible, labelable form control. If you’re labeling a hidden input, consider whether the label is necessary at all (hidden inputs are not user-facing). If the target element isn’t a form control, either change it to the appropriate form element or use a different approach like aria-labelledby.

Examples

❌ for references a non-existent ID

<label for="username">Username</label>
<input id="user-name" type="text">

The for value "username" doesn’t match the input’s id of "user-name".

✅ Fixed: matching for and id

<label for="username">Username</label>
<input id="username" type="text">

❌ for references a hidden input

<label for="token">Token</label>
<input id="token" type="hidden" value="abc123">

An <input type="hidden"> is not a visible form control and cannot be labeled.

✅ Fixed: remove the unnecessary label

<input id="token" type="hidden" value="abc123">

Hidden inputs don’t need labels since users never interact with them directly.

❌ for references a non-labelable element

<label for="info">Information</label>
<div id="info">Some details here</div>

A <div> is not a labelable element, so the for association is invalid.

✅ Fixed: use a proper form control or implicit labeling

<label for="info">Information</label>
<textarea id="info"></textarea>

❌ for references an element inside another form control

<label for="opt">Choose one</label>
<select>
  <option id="opt" value="a">Option A</option>
</select>

An <option> element is not a labelable element. The label should point to the <select>.

✅ Fixed: reference the <select> element

<label for="choice">Choose one</label>
<select id="choice">
  <option value="a">Option A</option>
</select>

Using implicit labeling as an alternative

Instead of using the for attribute, you can wrap the form control inside the <label> element. This creates an implicit association without needing for or id at all:

<label>
  Age
  <input type="number">
</label>

This approach avoids the for/id mismatch problem entirely and is equally valid for accessibility.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing