Grouping Controls

in Forms Tutorial

Overview

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

Grouping needs to be carried out visually and in the code, for example, by using the <fieldset> and <legend> elements to associate related form controls. Also, related entries of a <select> element can be grouped using <optgroup>.

Associating related controls with fieldset

The <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.

The legend for a group of controls can also highlight common attributes of all controls, for example, to advise that all fields in the group are required.

Radio buttons

In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using <fieldset>.

Example

Output format

Text file

CSV file

HTML file

Code Snippet

<fieldset>
<legend>
Output format
</legend>
  
<div>
    
<input
 
type=
"radio"
 
name=
"format"
 
id=
"txt"
 
value=
"txt"
 
checked
>
    
<label
 
for=
"txt"
>
Text file
</label>
  
</div>
  
<div>
    
<input
 
type=
"radio"
 
name=
"format"
 
id=
"csv"
 
value=
"csv"
>
    
<label
 
for=
"csv"
>
CSV file
</label>
  
</div>
  […]
</fieldset>

Checkboxes

In the example below, three checkboxes are part of an opt-in function for receiving different types of information.

Example

I want to receive

The weekly newsletter

Offers from the company

Offers from associated companies

Code Snippet

<fieldset>
<legend>
I want to receive
</legend>
	
<div>
		
<input
 
type=
"checkbox"
 
name=
"newsletter"
 
id=
"check_1"
>
    
<label
 
for=
"check_1"
>
The weekly newsletter
</label>
	
</div>
	[…]
</fieldset>

Related fields

This example shows form fields to enter shipping and billing addresses. As the labels in both groups have the same text, the fieldset element also helps to distinguish the form fields by their groups. In case the <legend> is not read by screen readers (see note below), labels for the first form control in each group should include the group’s name. This name can be hidden visually.

Example

Shipping Address:

Shipping

Name:

Street:

Number:

City:

ZIP code:

Billing Address:

Billing

Name:

Street:

Number:

City:

ZIP code:

Code Snippet

<fieldset>
	
<legend>
Shipping Address:
</legend>
	
<div>
		
<label
 
for=
"shipping_name"
>
      
<span
 
class=
"visuallyhidden"
>
Shipping 
</span>
Name:
    
</label><br>
		
<input
 
type=
"text"
 
name=
"shipping_name"
 
id=
"shipping_name"
>
	
</div>
  
<div>
    
<label
 
for=
"shipping_street"
>
Street:
</label><br>
    
<input
 
type=
"text"
 
name=
"shipping_street"
 
id=
"shipping_street"
>
  
</div>
	[…]
</fieldset>
<fieldset>
	
<legend>
Billing Address:
</legend>
	
<div>
		
<label
 
for=
"billing_name"
>
      
<span
 
class=
"visuallyhidden"
>
Billing 
</span>
Name:
    
</label><br>
		
<input
 
type=
"text"
 
name=
"billing_name"
 
id=
"billing_name"
>
	
</div>
  
<div>
    
<label
 
for=
"billing_street"
>
Street:
</label><br>
    
<input
 
type=
"text"
 
name=
"billing_street"
 
id=
"billing_street"
>
  
</div>
	[…]
</fieldset>

Note: Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

• Make the legend as short as possible for situations in which it is read together with the label each time.
• Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

Associating related controls with WAI-ARIA

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.

This technique provides additional styling possibilities.

Example

Shipping Address:

Shipping

Name:

Street:

Number:

City:

ZIP code:

Billing Address:

Billing

Name:

Street:

Number:

City:

ZIP code:

Because WAI-ARIA not fully supported in all web browser and screen reader combinations, a group identifier should be added to the first form control in the group.

Code Snippet

<div
 
role=
"group"
 
aria-labelledby=
"shipping_head"
>
	
<div
 
id=
"shipping_head"
>
Shipping Address:
</div>
	
<div>
		
<label
 
for=
"shipping_name"
>
      
<span
 
class=
"visuallyhidden"
>
Shipping 
</span>
Name:
    
</label><br>
		
<input
 
type=
"text"
 
name=
"shipping_name"
 
id=
"shipping_name"
>
	
</div>
	[…]
</div>
<div
 
role=
"group"
 
aria-labelledby=
"billing_head"
>
	
<div
 
id=
"billing_head"
>
Billing Address:
</div>
	
<div>
		
<label
 
for=
"billing_name"
>
      
<span
 
class=
"visuallyhidden"
>
Billing 
</span>
Name:
    
</label><br>
		
<input
 
type=
"text"
 
name=
"billing_name"
 
id=
"billing_name"
>
	
</div>
	[…]
</div>

Grouping items in select elements

For select elements with groups of options, the optgroup element can be used to indicate such groups. The label attribute of the optgroup element is used to provide a label for the group. This is especially useful for lists with many related options. In the example below, users can choose from lectures in one of three courses.

Example

Which course would you like to watch today?
Course:

Code Snippet

<select>
	
<optgroup
 
label=
"8.01 Physics I: Classical Mechanics"
>
		
<option
 
value=
"8.01.1"
>
Lecture 01: Powers of Ten
</option>
		
<option
 
value=
"8.01.2"
>
Lecture 02: 1D Kinematics
</option>
		
<option
 
value=
"8.01.3"
>
Lecture 03: Vectors
</option>
	
</optgroup>
	
<optgroup
 
label=
"8.02 Physics II: Electricity and Magnestism"
>
		
<option
 
value=
"8.02.1"
>
Lecture 01: What holds our world together?
</option>
		[…]
	
</optgroup>
	[…]
</select>

Back to Top