Don’t forget the “for” attribute in your HTML form labels

Mauvis — Thu, 03 Apr 2008 15:54:07 +0000

Many developers know that a label is a good element to use inside forms. They help associate text with inputs and aid in accessibility for screen readers and such. For most modern browsers, a proper label when clicked on will also conveniently focus on the input it’s associated with. However, if your label looks like this, it’s incorrect:

<form>
     <label>Email:</label>
     <input id="email" size="30" name="email" type="text" />
</form>

The browser (and assisting devices) may not be smart enough to associate the label by proximity. You should always explicitly target the element using the the label’s for property:

<form>
     <label for="email">Email:</label>
     <input id="email" size="30" name="email" type="text" />
</form>

In the forms below, email1 is using an input without the for attribute and email2 is. Try clicking on the labels to see if it makes a difference in your browser.

ReadyState4 » XHTML

Don’t forget the “for” attribute in your HTML form labels