Warning Label for attribute points to a missing id
Why a <label for="..."> that doesn't match any element's id silently fails to associate with a form control.
The validator flags a <label for="x"> where no element in the document has id="x".
Example
<!-- Wrong: id typo, "emial" vs "email" -->
<label for="emial">Email</label>
<input id="email" type="email">
<!-- Right -->
<label for="email">Email</label>
<input id="email" type="email">Why it matters
The for/id pairing is one of three ways to associate a label with a control (the others being wrapping the control in the label, or aria-labelledby), and it's the most common one. When the id doesn't match anything, the browser doesn't error — it just fails to create the association, silently. The visible effect is subtle: clicking the label text no longer focuses the input, and screen reader users lose the field's name entirely, often the only sign something is wrong. This is usually a typo in one of the two ids, or a leftover for value from a field that was renamed or removed.
Frequently asked questions
Does this break the page visually?
No — a mismatched for/id pair has zero visual effect, which is exactly why it's easy to ship without noticing. The only symptoms are behavioral: clicking the label doesn't focus the field, and screen readers announce the field without a name.
Is there a way to avoid this class of bug entirely?
Wrap the input directly inside the <label> instead of using for/id — a wrapping label associates automatically with no id to keep in sync, at the cost of slightly less layout flexibility.