How to fix: The for attribute of the label element must refer to a form control.

Most Likely Cause and Fix

Your markup contains a <label> element with a for attribute that does not refer to the id of any form input.

The for attribute of a <label> must refer to the id attribute of a form input.

Use:

<label for="email-field">Email</label>
<input name="email" id="email-field" type="text" />

instead of:

<label for="email-field">Email</label>
<input name="email" id="email" type="text" />

What This Means

This error is telling you that a <label> within a <form> uses a for attribute incorrectly.

The for attribute of a <label> is used to associate a label with a specific form input. It must contain the id of the input to which it is associated. Leaving the for attibute blank or referring to an input that does not exist is not allowed.

How To Fix It

Refer to the line and column number in the specific error message you encountered to identify the relevant <label> element.

Ensure that the label's for attribute contains the value of a id used on a input.

Use:

<label for="email-field">Email</label>
<input name="email" id="email-field" type="text" />

instead of:

<label for="email-field">Email</label>
<input name="email" id="email" type="text" />

Discuss, Comment and Improve

Did this help you? Can this page be improved? Let us know!

comments powered by Disqus