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 the size attribute combined with the form-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.

Example

Personal details

First name

Last name

Postcode Enter your postcode without any spaces. For example, KY169AL.

Code



Personal details
	
		
			
				
					First name
					
					
					
					
					
					
				
			
		
	
	
		
			
				
					Last name
					
					
					
					
					
					
				
			
		
	
	
		
			
				
					Postcode
					Enter your postcode without any spaces. For example, KY169AL.

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 the type="text" attribute.
Email addresses
This will only accept valid email formats and when focussed will display an optimised keyboard on many devices. Use the type="email" attribute.
Telephone numbers
This will display an optimised keyboard on many devices. Use the type="tel" attribute.
Passwords
This will hide the contents of the field as it is entered. Use the type="password" attribute.
Numbers
This will display an optimised keyboard on many devices. For better accessibility support please use the inputmode="numeric" pattern="[0-9]*" attributes rather than type="number".

Example

Full name Example text input type.

Email Example email input type.

Telephone Example telephone input type.

Spaces required Example numeric input type.

Password Example password input type.

Code


	
		
			
				
					Full name
					Example text input type.
					
					
					
					
					
				
			
		
	
	
		
			
				
					Email
					Example email input type.
					
					
					
					
					
				
			
		
	
	
		
			
				
					Telephone
					Example telephone input type.
					
					
					
					
					
				
			
		
	
	
		
			
				
					Spaces required
					Example numeric input type.
					
					
					
					
					
				
			
		
	
	
		
			
				
					Password
					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.

Example

Name

Code

Optional fields

If you do ask for optional information, you must mark the labels of optional fields with (optional).

Example

Postcode (optional)

Code


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

Example

Postcode Enter your postcode without any spaces. For example, KY16 9AL.

Code


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

Example

Code

Textarea

Allows for multiple lines of text.

Example

Put additional instructions here

Code


	
		
			
				
					Put additional instructions here

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.

Example

Put additional instructions here

Code


	
		
			
				
					Put additional instructions here

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.

Example

What colours do you like?

Select all options that apply.

Gold
Silver
Bronze

Code



    
	    What colours do you like?
	    Select all options that apply.
        
            
                
                Gold
                
            
            
                
                Silver
                
            
            
                
                Bronze

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.

Example

What colours do you like?

Select all options that apply.

Gold
Silver
Bronze

Code



    
	    What colours do you like?
	    Select all options that apply.
        
            
                
                Gold
                
            
            
                
                Silver
                
            
            
                
                Bronze

Checkboxes inline (small)

Smaller checkboxes can be used when these elements need to be less visually prominent.

Example

What colours do you like?

Select all options that apply.

Cyan
Yellow
Magenta
Black

Code



    
	    What colours do you like?
	    Select all options that apply.
        
            
                
                Cyan
                
            
            
                
                Yellow
                
            
            
                
                Magenta
                
            
            
                
                Black

Checkboxes stacked (small)

Smaller checkboxes can be used when these elements need to be less visually prominent.

Example

What colours do you like?

Select all options that apply.

Red
Green
Blue

Code



    
	    What colours do you like?
	    Select all options that apply.
        
            
                
                Red
                
            
            
                
                Green
                
            
            
                
                Blue

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.

Example

How many fudge doughnuts would you like?

Remember that eating too many doughnuts may be bad for you.

One
Two
Three

Code



    
	    How many fudge doughnuts would you like?
	    Remember that eating too many doughnuts may be bad for you.
        
            
                
                One
                
            
            
                
                Two
                
            
            
                
                Three

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.

Example

How many fudge doughnuts would you like?

Remember that eating too many doughnuts may be bad for you.

One
Two
Three

Code



    
	    How many fudge doughnuts would you like?
	    Remember that eating too many doughnuts may be bad for you.
        
            
                
                One
                
            
            
                
                Two
                
            
            
                
                Three

Radio buttons stacked with conditional

You may reveal an additional input field, depending on the radio button selected.

Example

How many fudge doughnuts would you like?

Remember that eating too many doughnuts may be bad for you.

One
Two
Three
Other

Code



    
	    How many fudge doughnuts would you like?
	    Remember that eating too many doughnuts may be bad for you.
        
            
                
                One
                
            
            
                
                Two
                
            
            
                
                Three
                
            
            
                
                Other
                
            
        
    
	
		Other

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.

Example

Student status

Please select your student status.

Code



    
        
            Student status
            Please select your student status.

Select box with conditional

You may reveal an additional input field, depending on the option selected.

Example

Student status

Please select your student status.

Code



    
        
            Student status
            Please select your student status.
            
			
				Other

Date picker

Use date picker for inputting date elements.

Example

Pick a date

Code


	
		
			
				
					Pick a date

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.

Example

Upload a file

Code


	
		
			
				
					Upload a file

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.

Example

Price

.00

Email address Enter only the username part of your email address. For example, kt123.

@st-andrews.ac.uk

Code


	
		
			
				
					Price
					
					
					£
					
					.00
					
				
			
		
	
	
		
			
				
					Email address
					Enter only the username part of your email address. For example, kt123.
					
					
					
					@st-andrews.ac.uk