Form page headingsStatusdevelopment
Titling pages that contain a single form
Guidance
In transactional services it is common to have a page containing a single form as the main action. This pattern describes how to mark-up the page heading (h1) depending whether the page contains a form with a single question, a form with single question or fieldset with multiple answers, or a form with multiple questions.
Pages with a form asking a single question with a single answer should combine the label with the h1.
Pages with a form asking a single question with multiple answers (such as checkbox or radio groups), or multiple questions that are related under the a single fieldset, should combine the fieldset legend and the h1.
Pages with more complex forms with multiple questions or multiple fieldsets should use the page heading to title the form.
Example - single question, single input
<form class="form js-validate" action="#"><h1><label for="fname" class="label plus-3 push-bottom--half">First Name</label></h1><span class="error-message" data-valmsg-for="fname"></span><input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name" class="input push-bottom--double" id="fname" name="fname" aria-required="true"/><button type="submit" class="btn">Submit</button></form>Example - single question, multiple choice
<form class="form js-validate" action="#"><fieldset class="fieldset"><legend class="legend"><h1 class="legend__title plus-3">Your preferences</h1><p class="legend__hint">Please tick at least one option below.</p></legend><span class="error-message push-bottom--half" data-valmsg-for="opts"></span><div class="checkbox"><input class="checkbox__input" id="opt1" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt1">Option 1</label></div><div class="checkbox"><input class="checkbox__input" id="opt2" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt2">Option 2</label></div><div class="checkbox"><input class="checkbox__input" id="opt3" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt3">Option 3</label></div></fieldset><button type="submit" class="btn">Submit</button></form>Example - multiple questions
<form class="form js-validate" action="#"><h1 class="plus-3 medium">Contact us</h1><p class="push-bottom">All fields are required unless marked as optional.</p><fieldset class="fieldset"><legend class="legend">Your details</legend><div class="form-row"><label for="fname" class="label">First Name</label><span class="error-message" data-valmsg-for="fname"></span><input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name" class="input" id="fname" name="fname" aria-required="true"/></div><div class="form-row"><label for="lname" class="label">Last Name</label><span class="error-message" data-valmsg-for="lname"></span><input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name" class="input" id="lname" name="lname" aria-required="true"/></div><div class="form-row"><label for="aka" class="label">Also known as <span class="label__hint">Optional</span></label><input class="input" id="aka" autocomplete="nickname " name="aka"/></div><div class="form-row"><label for="email" class="label">Email</label><span class="error-message" data-valmsg-for="email"></span><input data-val="true" data-val-required="Email must not be empty" data-val-email="Email must be correct format" class="input" type="email" id="email" autocomplete="email" name="email"/></div></fieldset><fieldset class="fieldset"><legend class="legend">Your preferences<p class="push-bottom--half baseline">Please tick at least one option below.</p><p class="error-message push-bottom--half" data-valmsg-for="opts"></p></legend><div class="checkbox"><input class="checkbox__input" id="opt1" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt1">Option 1</label></div><div class="checkbox"><input class="checkbox__input" id="opt2" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt2">Option 2</label></div><div class="checkbox"><input class="checkbox__input" id="opt3" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt3">Option 3</label></div><div class="checkbox"><input class="checkbox__input" id="opt4" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt4">Option 4</label></div><div class="checkbox"><input class="checkbox__input" id="opt5" name="opts" type="checkbox" data-val="true" data-val-required="Select at least one option"/><label class="checkbox__label" for="opt5">Option 5</label></div></fieldset><fieldset class="fieldset"><legend class="legend">Terms and conditions</legend><div class="checkbox"><input data-val="true" data-val-required="You must agree to proceed" class="checkbox__input" id="tcs" name="tcs" type="checkbox"/><label class="checkbox__label" for="tcs">I have read and agree to the <a href="#">terms and conditions</a></label><span class="field-validation-error" data-valmsg-for="tcs"></span></div></fieldset><button type="submit" class="btn">Submit</button></form>Acceptance criteria
The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the forms behave visually and functionally as expected.
For validation in developer tools / web inspector
- Only one
h1
element should exist per page - For form pages asking a single question with a single input, the
h1
tag should contain the appropriatelabel
. - For form pages asking a single question with multiple choices, the
h1
should be inside thelegend
tag. - For form pages asking multiple questions, the
h1
tag should be above all form inputs and summarise the entire form
For visual validation
- The form should visually make sense and be easily scanned
- There should be a clear visual heirarchy of headings, legends and labels.
For functional validation
- Screenreaders should only read the title of the page once. There should be no duplication of the question text.
- A screenreader user should be able to navigate the page via headings or form inputs and the context should still make sense.