Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 182

Use the right input for the right job
So, you know about every input type there is, but which one is appropriate to use in a
given situation? Some of these are obvious—a file input has only one purpose, and no
other type of input can be used in its place—but what about, for instance, check boxes
vs. radio buttons? A good rule of thumb is that if you have a list of two or more options
and the user must select one and only one of them, use radio buttons. Selecting one ra-
dio button should then deselect any other radio button that is part of the same named
group. But if the list contains many options to select from, consider using a select
menu instead. You'll retain the inability to select more than one option, and you'll save
some space (at the expense of “discoverability”).
Check boxes, on the other hand, are used when there are several choices to make,
and users can leave them all blank or select as many as they like. Checking one check
box does not deselect any others within the group. The menu equivalent of a series of
check boxes is a select menu with the multiple attribute present, but check boxes
are generally easier to use because they do not require the user to understand what key-
board/mouse combination to use to select/deselect the options, so you may want to avoid
multiple-select lists where possible.
You should also use a check box when there is a single option that users can switch on
or off, such as for agreeing to sign up for a newsletter. You would not use a radio button
here because a radio button can only be deselected by selecting another.
Remember also to use labels, fieldsets, and legends to aid in both usability and ac-
cessibility.
Keep it short and simple
Collect only the information you need and no more than that. Do you really need to
know if I'm a Mr. or a Ms.? Do you really need my fax number? My occupation? My
annual salary? Question the presence of every field you have in your form, and if it's a
compulsory field, question again whether it needs to be. Your marketers may relish the
opportunity to collect reams of personal data about your site visitors, but the longer your
form is and the more irrelevant users start perceiving it to be, the higher the risk that
they'll abandon it.
Don't make me think, don't make me work, and don't try to trick me
Make your form as easy to complete as possible. If at any point a user has to pause for
a few seconds to try to work out what's gone wrong or what you mean, then that's a few
more seconds when he might just think “Oh, forget it” and go off to make a sandwich.