DEV 7.1 Simplify form design, use good spacing, sensible grouping and labels for every element

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 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.

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: avoid jaggy alignment and large spaces between label and input elements: Good: put labels next to input elements 

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