Grouping Controls
July 10, 2002
Once you've decided on the form
controls, you can put them on a page. Often, the data you collect can be split
up into logical units requiring related answers – such as details about the
users themselves, details about their interests and hobbies, details about
orders they would like to make, and so on.
In order to help the user fill in the form, and to make
it intuitive, you should group related items of information together (these
should correspond to the groupings we suggested you come up with before designing
the form).
When grouping information , make sure that you don't ask for the same information twice. If you've
repeated any questions, can you use a technique (such as a hidden field or
server-side storage) to remember what the user has already entered?
It is important that groupings reflect the user's understanding of
the topic, rather than an internal company understanding of the topic or
one relating to how the information will be used.
As we said earlier, if you must
ask for data that's not directly relevant to the task in hand, you should
put it at the end of the form . Remember to clearly indicate which controls
are mandatory and, where possible, which are optional. If you use some kind
of marker (for example, an asterisk) to identify mandatory data, then the
absence of that marker will imply that individual items are optional; even
so, if you have a whole section of controls that are optional, they should
be explicitly marked as such.
Using <fieldset> Elements
As we saw in Chapter 1, you can use special elements to
group together sections of a form: the <fieldset> and <legend> elements.
The <fieldset> element
simply contains a group of form controls, and it can have a <legend> element as a child to caption the box (we also looked at offering
keyboard shortcuts to these fieldsets in Chapter 1).
<form>
<fieldset>
<legend>[Section C] <em>Marital Status</em></legend>
<h4>[Question 10] What is your marital status?</h4>
<input type="radio" name="radMaritalStatus" value="single" />Never Married
<em>(If selected go to Question 14)</em><br />
<input type="radio" name="radMaritalStatus" value="married" />Married<br />
<input type="radio" name="radMaritalStatus" value="separated" />Separated
<br />
<input type="radio" name="radMaritalStatus" value="divorced" />Divorced
<h4>[Question 11] Is your partner applying with you?</h4>
...
</fieldset>
</form>
Fieldsets were only introduced in IE 4+ and Netscape 6;
however , older browsers will just ignore them. The typical rendering of fieldsets
looks something like this (ch02_eg4.htm):
You may choose your own alternative to fieldsets, such as
line breaks or using a table, but grouping of related questions will help the user to understand
the form better. The advantage of using tables is that they will be available
to more browsers. However, fieldsets have been introduced specifically for
the purpose of grouping data, and they are likely to be used more and more
in the future.
Drop-down Menus and Select Boxes
Usable Forms for the Web
Using Labels
|
