I've never been a big fan of building web forms, and I don't know many people who are. However, the fact of the matter is that almost every website has a few forms, and these forms play a key roll in the user experience. Larger websites have huge, complex forms, that we as web developers spend a lot of time building, and thousands of users spend even more time filling out. That being said I think it's important to become well versed in the ins and outs of building a proper form.
Checkboxes and Radio Fields
Yes, checkbox and radio fields, the little squares and circles we all must click to indicate the important decisions of our internet life. When you fill out a web form that has one of these fields you can sometimes click anywhere on the text describing the element. However, other (most?) times, this is not the case, and you have to click directly on the small circle or box of the field element to indicate your choice. Now for most experienced web users this is a mere annoyance, but the whole point of the web is we want it to be easily accessible to everyone. Forms take a long time to fill out and no one likes entering all that info, and answering all those questions. The last thing we want to do is make it difficult.
Web Developer... meet <label> Tag
So what is the solution to all this. Well it's surprisingly simple, you add a new tag to your arsenal: the <label> tag. In simple terms, the <label> tag indicates in the html which text goes with which form field. Let me show you how the code should look:
Checkbox Example
Checkbox Example Code
<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>
See how easy that was? We simply wrap the <input> tag with a <label> tag. Then we use the for attribute to indicate which form field we are talking about. When working with checkbox fields the for of the <label> needs to be the same as the id and the name of the <input>. For radio buttons it's exactly the same except for the name attribute will be the same for all the items in the group like this:
Radio Button Example
Radio Button Example Code
<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>
Not just for Checkboxes and Radio Buttons
Now even thought that's where I'm putting all the focus on this article, doesn't mean the <label> tag is just for checkboxes and radio buttons. It should be used on your <input> (text, radio and checkbox), <select>, and <textarea> fields. This will keep solid accessibility to browsers, screen readers, and search engines. Creating accessible forms is a key element to developing with web standards.
A Call to Google and the Rest
Using <label> tags as recommended by the w3c is nothing new. In fact, the recommendation for HTML 4.01 was published 9 years ago! Yet somehow, some of the biggest sites on the web are STILL not using <label> tags on the main signup forms on their websites.
Most big name sites that are NOT utilizing <label> tags at the time of this writing on their primary signup forms.
How is it that you are the most popular sites on the internet, yet you are still ignoring web standards and usability? Isn't it time you stepped it up?
Additional Resources
For more information on creating and styling forms using label tags and other good practices check out:
