HTML and CSS Reference
the document, attempting to categorize the elements of the form. At
a higher level, you are reading the text guides and prompts, trying to
determine what input is required of you. At the highest level, you are
seeking to accomplish a goal with the interface as your tool.
A good form accommodates all three of these perceptive needs. Input
elements should be organized in logical groups so that your brain can
process the form layout in chunks of related fields. Consistent, well-writ-
ten prompts and supporting text assist and lead the user to enter the
correct information. Text prompts also remind users of the task at hand
and reinforce the form's goal.
9.11.4. Creating Forms That Flow
Users process forms in a predictable order, one element after another,
seeking to find the next element as they finish the previous one. To
accommodate this searching process, you should design your forms so
that one field leads naturally to another and related fields are grouped
together. Similarly, groups should lead naturally to one another and
should be formatted in a consistent manner.
Simply stringing a number of fields together does not constitute an ef-
fective form. You must put yourself in the place of your users, who are
using the form for the first time. Test your form on unsuspecting friends
and colleagues before you release it to the general public. Is it easy to
determine the purpose of the form? Where do you start filling things
out? Can the user find a button to click to submit the form? Is there an
opportunity to confirm decisions? Do readers understand what is expec-
ted of them for each field?
Your forms should lead the user naturally through the process of supply-
ing the necessary data for the application. You wouldn't ask for a street
address before asking for the user's name; other rules may dictate the
ordering of other groups of input elements. To see whether your form
really works, make sure you view it on several browsers and have sev-
eral people fill it out and comment on its effectiveness.