Forms

Labels

• Ensure every form control - e.g. text field, dropdown, checkbox - have a label
• Ensure the label is descriptive
• Ensure the label is in close immediate proximity to the control, preferably above the control
• Ensure related form controls - e.g. radio button group, related text fields - have a group label

Annotations:

• Annotate labels using <label>
• Annotate a group of related form controls using <fieldset>
• Annotate group label using <legend>

Additional resources:

• W3 guidelines on labelling controls
• W3 guidelines on grouping controls

Instructions

• Ensure form control have instructions in case they require specific format or other instructions
• Ensure the instruction is clear and concise
• Ensure the instructions are in close immediate proximity to the control, logically above the control as part of the label or below the label
• Ensure required fields are clearly marked as required, e.g. with * asterisk
  • alternatively, can mark optional fields using '(optional)' in the label
  • in any case, provide instructions in the beginning of the form, e.g. 'Fields marked with * asterisk are required'

Additional resources:

• W3 guidelines on form instructions

Redundant data entry

Ensure people don't have to enter the same information twice in the same session, unless it is essential for security

Example of solutions:

• Data can be auto-populated or available for selection

Error prevention

Allow people to confirm, correct, or reverse important submissions. An important action is an online task that could have serious consequences.

Examples:

• legal contracts
• financial transactions
• user account

Examples of solutions:

• allow to review summary before submission
• add a required checkbox to confirm submission
• show confirmation popup before submission
• give time to cancel or edit after submission
• allow data recovery after submission

Error messages

• Show error messages after form validation
• Clearly identify the problem in the error message, e.g. which form field has the error and what is the problem
• Don't use color alone to identify the erroneous fields. Add graphics and optionally the error message
• If you show error messages next to the erroneous field, avoid messages under the field
• If there are multiple errors, list them all above the form
• Avoid live field validation during typing, unless necessary

Suggested solutions:

• Error summary pattern (gov.uk)
• User notification approaches (W3)

Error suggestions

Error messages should include concise and helpful suggestion on how to correct the issue

• including empty required fields

Bad and good examples:

• 'Invalid field' vs 'Enter address'
• 'Invalid format' vs 'Enter a valid 5-digit zip code'

Session timeout

• Avoid setting time limits to form completion
• If time limits are used, allow people to turn them off, adjust them, or extend them

Exceptions:

• Services where a time limit is essential for the activity, e.g. live events, auctions, exams

Authentication

• Ensure the login to the service do not rely on memory alone (e.g. memorizing password) or other cognitive challenge (e.g. solving a puzzle).
• Allow people to always see what they type, e.g. an option to show/hide password

Example of solutions:

• login fields have the autocomplete attribute that allow password managers to save and repopulate the data
• allow copy-paste credentials from third-party password managers
• allow two-factor authentication, e.g. email verification, authenticator code

Color contrast

• Ensure form controls - e.g. input field boundaries - have a contrast ratio of at least 3:1 against adjacent colors

Additional resources:

• WebAIM Contrast Checker

Submit button

• Avoid disabling the submit button