Why You Must Learn to Love <label>
- December 4, 2008 10:41 PM
- User Interface Design
- Comments (0)
Once you start thinking about usability of internet forms, it starts to really stick in your head. You catch yourself filling out a form and going, "Man, they could probably get more people to fill this out if they just put a line break here, or used a different font color." Even I, a web developer, tend to shy away from forms that aren't easy to use, or ask for things I don't feel like telling them. Maybe thats why I have come to point that I actually get kind of angry when I see people skip out on using the simplest possible usability increaser: the <label> tag.
Seriously, do you know what this tag does? If you give it an id in the for="something" attribute, the whole text of the label is a click-able button to reach the element with that id. For checkboxes and radio buttons, the label can activate selection as well; rather then trying to click on a tiny little box, you can click on a whole word, or multiple words. For example:
Click Me!
vs
In order to click the first one, you had to hone in on the tiny little 20x20px (or smaller) square didn't you? The second example you could click on the whole phrase OR the box, and you were still good. The code for these?
vs
<input id="click" type="checkbox"/> <label for="click">No, Click Me!</label>
You can even do it if you need multiple checkboxes:
<cfloop from="1" to="10" index="x">
<cfoutput><input id="click_#x#" type="checkbox" name="click"/> <label for="click_#x#">Click Me #x#</label><br /></cfoutput>
</cfloop>
This change increases the click-able area for your checkbox list by a minimum of 200%, if not 1000% or more, making it easier for people to use your forms. If your forms are easier to use, your users will fill them out more quickly, and more often. Learn to love the <label>.
