University of St Andrews

Form elements

Keep forms as simple as possible, see form example for more information.

Rules for form elements

• You must only ask for the information you absolutely need.
• You must not mark mandatory fields with asterisks.
• You must not use forms in sidebars.
• You may ask for optional information, if so, you must mark the labels of optional fields with ‘(optional)’.

Options available

• Checkboxes inline
• Checkboxes stacked
• Date picker
• Fieldsets and legends
• File upload
• Hint text
• Input addons
• Input fields
• Labels
• Optional fields
• Radio buttons inline
• Radio buttons stacked
• Radio buttons stacked with conditional
• Select box
• Select box with conditional
• Submit buttons
• Textarea
• Textarea with input limit counter

---

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.

Code

    

	    Options
	    
Please choose one or more options:
        

            

                
                One
                

            
            

                
                Two
                

            
            

                
                Three
                

            
        
    

---

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.

Code

    

	    Options
	    
Please choose one or more options:
        

            

                
                One
                

            
            

                
                Two
                

            
            

                
                Three
                

            
        
    

---

Date picker

Use date picker for inputting date elements.

Code

	

		

			
				Pick a date
				
				
				
				
				
				
			
		
	

---

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.

Code

Personal details

	

		

			
				First name
				
				
				
				
				
				
			
		
	


	

		

			
				Last name
				
				
				
				
				
				
			
		
	


	

		

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

---

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.

Code

	

		

			
				Upload a file
				
				
				
				
				
				
			
		
	

---

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.
• You must ensure hint text can be read correctly by screen readers.

Code

	

		

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

---

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.

Code

	

		

			
				Price
				
				

				
£
				
				
.00
				
			
		
	


	

		

			
				Email address
				
				

				
				
				
@st-andrews.ac.uk
				
			
		
	

---

Input fields

You must use the .form-group class to create spacing when wrapping label and input pairs.

Code

	

		

			
				First name
				
				
				
				
				
				
			
		
	


	

		

			
				Last name
				
				
				
				
				
				
			
		
	

---

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.

Code

	

		

			
				Name
				
				
				
				
				
				
			
		
	

---

Optional fields

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

Code

	

		

			
				Postcode (optional)
				
				
				
				
				
				
			
		
	

---

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.

Code

    

	    Options
	    
How many fudge doughnuts would you like?
        

            

                
                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.

Code

    

	    Options
	    
How many fudge doughnuts would you like?
        

            

                
                One
                

            
            

                
                Two
                

            
            

                
                Three
                

            
        
    

---

Radio buttons stacked with conditional

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

Code

    

	    Options
	    
How many fudge doughnuts would you like?
        

            

                
                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.

Code

    

        

            Student status
            
Please select your student status.
            
                Please select one of the following…
                Undergraduate
                Research postgraduate
                Taught postgraduate
            
        
    

---

Select box with conditional

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

Code

    

        

            Student status
            
Please select your student status.
            
                Please select one of the following…
                Undergraduate
                Research postgraduate
                Taught postgraduate
                Other
            
			

				Other
				
			
        
    

---

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.

Code

    

		Submit
	

---

Textarea

Allows for multiple lines of text.

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 data-attribute data-length='[limit]', this sets the character limit.
• There must be an adjacent element <div class='textarea_feedback'></div>.

Code

	

		

			
				Put additional instructions here