Better Form Fields
When I first started surfing, I would try to click the text next to a radio button or checkbox in order to select it (after all, that works in most Windows programs). I suspect many web surfers still experience this annoyance.
This is a problem because it violates the expectations of some users and because the size of a clickable area determines the ease with which it can be clicked.
In fact, Joel Spolsky has a whole chapter called "People Can't Control the Mouse" in his book "User Interface Design for Programmers" in which he argues (in part), "you should design your program so that it doesn't take a tremendous amount of mouse-agility to use correctly" (think of the poor person with a ThinkPad or other hard-to-control-mouse).
The need for mouse-agility and the dissonance with many Windows programs (thus violating Mr. Spolsky's cardinal axiom of "A user interface is well design when it behaves exactly how the user thought it would"), makes this behavior a bit of a usability no-no.
Fortunately, a tag added in HTML 4 allows us to solve the problem. The <label> tag, when used correctly, will solve this problem and more.
Let's have a look:
<input type="checkbox" name="favfood" id="favfood-cheese" value="cheese">
<label for="favfood-cheese">Cheese</label>
The above code will enable the user to click on the word "Cheese" to select the checkbox next to the word. How does it work? The "for" attribute of the label must match the "id" attribute of the form field. If it does, the browser knows that the label is associated with that field.
The same syntax will work for radio buttons as well. In fact, it will work for any input type (including textarea). When used with textarea or input boxes, clicking the label will place the cursor inside that field.
As an added bonus, this syntax will also tell screen readers which text to associate with which input field, thereby making your forms easier to fill out for blind users.
I highly encourage you to start using the label field in your forms. It will help make them accessible to blind users and easier for every one else.
Good luck!
Related Links:
W3Schools: label
HTML Help: Label
Ryan Guill [ryanguill@gmail.com]
Your point about the text readers is exceptionally important to reinforce. A few years ago I had to work a site for the American Federation for the Blind and I had the enlightening opportunity to work with two ladies who relied on screen readers.
It was amazing how useless a form was without the label relationship. Another very useful HTML tag that helps build relationships/associations is the fieldset tag (along with its companion legend).
Using these tags made the forms we worked on immensely more useful to our target audience and now I am nearly dependant on the label being in place as well. It has become a pet peeve of mine to click on the text associated with a field and not have it activate the field.
The label when clicked will turn on a radio button, check/uncheck a checkbox, or bring focus to a text/select/textarea field.
Visit me @ http://bill.coldfusionjournal.com
Thanks! I am embarassed to say I had picked up using the
Thanks again.