DEV 7.1 Simplify form design, use good spacing and sensible grouping

Recommendations

• Ask for only the information you require - avoid form bloat.
• Create a clear path through the form:
  • Avoid multi-column forms unless absolutely necessary;
  • Avoid creating a 'jagged' misaligned appearance.
• Group similar items together and order logically:
  • Give each group a title and make distinctive:
    • Use borders, spacing, colour, etc,
    • Use <fieldset> and <legend> to code these and style with CSS (see DEV 7.3;)
  • Split very long forms into separate logical pages:
    • Indicate progress, e.g. (page 2 of 4,)
    • Provide means to go back.
• Position 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;
  • but if fewer 7, then a list of radio buttons is preferable as all options will be visible.
• Avoid use of the reset button:
  • It is very rarely (almost never) necessary and liable to get selected by mistake
• Do not use JavaScript 'jump menus:'
  • These are option boxes that auto submit as soon as something is selected with a mouse;
  • They prevent people who cannot use a mouse from using them and, therefore, accessing all the options.

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

Examples