Form elements
Keep forms as simple as possible, see form example for more information.
Rules for form elements
- You should only ever ask for the information you absolutely need.
- You must not mark mandatory fields with asterisks.
- You may ask for optional information, if so, you must mark the labels of optional fields with ‘(optional)’.
- You must not use forms in sidebars.
- Form elements that use the
form-control
class will fill the width of their container by default. For form elements that expect short inputs thesize
attribute combined with theform-control--auto-width
can be used to change an elements width.
Options available
- Fieldsets and legends
- Input fields
- Labels
- Optional fields
- Hint text
- Submit buttons
- Textarea
- Textarea with input limit counter
- Checkboxes inline
- Checkboxes stacked
- Checkboxes inline (small)
- Checkboxes stacked (small)
- Radio buttons inline
- Radio buttons stacked
- Radio buttons stacked with conditional
- Select box
- Select box with conditional
- Date picker
- File upload
- Input addons
Fieldsets and legends
Use fieldsets to group related form controls. The first element inside a fieldset must be a legend
element that describes the group.
- The
<legend>
element has had all styling removed so use appropriate heading tags or other font styling to match your form structure.
Input fields
- You must use the
.form-group
class to create spacing when wrapping label and input pairs. - Use the
required
attribute to tell the browser when input is needed for a field.
Input types
- Text
The default value using thetype="text"
attribute. - Email addresses
This will only accept valid email formats and when focussed will display an optimised keyboard on many devices. Use thetype="email"
attribute. - Telephone numbers
This will display an optimised keyboard on many devices. Use thetype="tel"
attribute. - Passwords
This will hide the contents of the field as it is entered. Use thetype="password"
attribute. - Numbers
This will display an optimised keyboard on many devices. For better accessibility support please use theinputmode="numeric" pattern="[0-9]*"
attributes rather thantype="number"
.
Example text input type.
Example email input type.
Example telephone input type.
Example numeric input type.
Example password input type.
Labels
- All form fields must be given labels.
- You must not hide labels unless the surrounding context makes them unnecessary.
- Labels must be aligned above input fields.
- Labels must be positioned to the right of checkboxes and radio buttons.
- Label text must be short, direct and in sentence case.
- You must not use colons at the end of labels.
- Labels must be associated with form fields using the
for
attribute.
Optional fields
If you do ask for optional information, you must mark the labels of optional fields with (optional)
.
Hint text
- You must not use placeholder text in form fields, as this will disappear once content is entered into the form field. Search fields are the only exception to this rule, but they must have a search icon or text indicating its usage.
- Hint text must sit above a form field.
- Hint text should be linked to the element it is describing by using the
aria-describedby
attribute.
Enter your postcode without any spaces. For example, KY16 9AL.
Submit buttons
- You must keep text short and use a verb such as 'submit' or 'continue'.
- You must not add a reset button. See the Neilsen Norman Group article on reset and cancel buttons for more information.
Textarea
Allows for multiple lines of text.
Textarea with input limit counter
- Allows for multiple lines of text with a character limit counter.
- There may be multiple textareas with limit counters of varying lengths on one page.
- Warns the user when the character limit is exceeded.
- The textarea must have the class
limit-counter
. - The textarea must have the attribute
maxlength='[limit]'
, this sets the character limit. - There must be an adjacent element with the class
.textarea_feedback
.
Checkboxes inline
- Clearly label when users can select one or more options.
- Only pre-select options for the user if there’s a strong, user-centred reason to do this.
- The label must be clickable.
Checkboxes stacked
- Clearly label when users can select one or more options.
- Only pre-select options for the user if there’s a strong, user-centred reason to do this.
- The label must be clickable.
Checkboxes inline (small)
Smaller checkboxes can be used when these elements need to be less visually prominent.
Checkboxes stacked (small)
Smaller checkboxes can be used when these elements need to be less visually prominent.
Radio buttons inline
These let users choose a single option from a list.
- You must use a select-box if you have more than 10 radio buttons.
- Radio buttons with large hit areas are easier to select with a mouse or touch devices.
- You must only pre-select options for the user if there’s a strong, user-centred reason to do this.
- The label must be clickable.
Radio buttons stacked
These let users choose a single option from a list.
- You must use a select-box if you have more than 10 radio buttons.
- Radio buttons with large hit areas are easier to select with a mouse or touch devices.
- You must only pre-select options for the user if there’s a strong, user-centred reason to do this.
- The label must be clickable.
Radio buttons stacked with conditional
You may reveal an additional input field, depending on the radio button selected.
Select box
- You should avoid using select boxes (drop-down lists), instead you should use radio buttons or checkboxes.
- You must only pre-select options for the user if there’s a strong, user-centred reason to do this.
Please select your student status.
Please select your student status.
Select box with conditional
You may reveal an additional input field, depending on the option selected.
Please select your student status.
Please select your student status.
Date picker
Use date picker for inputting date elements.
File upload
This element uses the native input: type='file'
. This is so the element gains focus when tabbing through the page. It also ensures the element functions when:
- using the keyboard
- using assistive technology
- JavaScript is not available.
Input addons
Addons may be used when the input field is always going to be prefixed with a particular value, for example collecting only the username for an @st-andrews.ac.uk
email address.
£
.00
Enter only the username part of your email address. For example, kt123.
@st-andrews.ac.uk