8.1 Simplify form design, use good spacing and sensible grouping

View correlation with WAI checkpoints

A form with a good layout and that is easy to use will benefit all users. Poor design will lead to errors, confusion and abandonment.

Ask for only the information you require - avoid form bloat
Create a clear path through the form:
- Avoid multicolumn forms unless absolutely necessary
- Avoid 'jagged' misaligned appearance
Group similar items together, and order logically:
- Give each group a title and make distinctive:
  - Borders, spacing, colour, etc.
  - Use <fieldset> and <legend>
- Split very long forms into separate logical pages:
  - Indicate progress, e.g. (page 2 of 4)
  - Provide means to go back
Space form labels close to the input elements - avoid large gaps:
- Consider right aligned next to the input element
- Consider directly above the input element
Use the simplest form element for the job, e.g.
- A drop down option box may be easier than a long array of radio buttons
Never use the reset button - it is never necessary, and liable to get selected by mistake
Do not use JavaScript 'jump menus' - option boxes that auto submit - these cannot be used using the keyboard alone

Note: Forms should be styled using CSS, but often it can be easier to use layout tables. If using tables, ensure the tables linearise well. Test by tabbing through the form.

Good: A clearly laid out form - showing good grouping, clear labels close to their input elements, appropriate use of radio buttons (choice of 3 mutually exclusive items). Poor: large space between label and input elements Poor: misaligned 'jagged' input elements - difficult to read

Use drop down menus rather than selection from long lists of radio buttons Do not use the reset button - there are almost no cases where it is warranted

8.1 Simplify form design, use good spacing and sensible grouping

Recommendations

Examples