Labels and legends headings

Whenever you design a form, you should start by splitting it across multiple pages with each page containing just one thing, for example:

• one piece of information you’re telling a user
• one decision they have to make
• one question they have to answer

This helps users focus and understand what’s being asked of them.

When you’re asking just one question on a page, you can make the question the page’s heading. Your page heading will then most likely be the same as the <label> or <legend> for the input.

For example, on a page that only asks users for their postcode, the question ‘What is your postcode’ would be both the page heading and the most logical <label> for your text input.

Labels as page headings

To set the contents of a label as the page heading, you need to put the <label> tag inside the <h1> tag.

Example

Sample HTML Code

<form action="" class="govcy-form" novalidate>
    <div class="govcy-form-control">
        <h1><label class="govcy-label" for="input">Label</label></h1>
        <span class="govcy-hint">Hint</span>
        <input type="text" class="govcy-text-input">
    </div>
</form>

Legends as page headings

To set the contents of a legend as the page heading, you need to put the <legend> tag outside the <h1> tag.

Example

Sample HTML Code

<form action="" class="govcy-form" novalidate>
    <fieldset class="govcy-fieldset">
        <legend class="govcy-legend"><h1>Do you agree?</h1></legend>
        <div class="govcy-form-control">
            <label class="govcy-radio">Yes
                <input class="govcy-radio-input" type="radio" name="radio">
                <span class="govcy-radio-checked" tabindex="1"></span>
            </label>
            <label class="govcy-radio">No
                <input class="govcy-radio-input" type="radio" name="radio">
                <span class="govcy-radio-checked" tabindex="2"></span>
            </label>
        </div>
    </fieldset>
</form>