Don’t forget the “for” attribute in your HTML form labels
Posted on April 3rd, 2008 in XHTML |
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.