Forms
Guidelines
novalidate
set on form to disable browser validation- Top-aligned labels
- Labels always visible
- A new row for each question
-
Only use the character count component when there is a good reason for limiting the number of characters users can enter.
When using this component:
- Display how many characters the user has remaining as they type.
- Display the remaining characters below the text area.
- Allow the user to enter more characters than the maximum limit. The form validation will handle any excess.
-
Use the appropriate
autocomplete
attribute for the field in question. View the list of values at MDN - All fields optional by default; explicitly mark those which are required.
-
Use a
fieldset
to group multiple controls. Alegend
describes a group like alabel
describes an individual control. - Use sensible defaults: design for common circumstances first.
- The input width gives users a clue as to the length of the content it requires.
- Do not disable the form submit button: allow it to be discovered and trigger the form validation rules.
Validation
Messsages should:
- Be concise
- Be consistent
- Be specific
- Avoid jargon
- Use plain language
- Use active voice
- Not blame the user