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

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
Enter your postcode without any spaces. For example, KY169AL.
Code 
<div class="dpl-form">
    <fieldset>
    <legend><h3>Personal details</h3></legend>
            <div class="form-group">
                <label class="form-label" for="first-name1">First name</label>
                <input  type="text" id="first-name1" class="form-control" name="first-name1">
            </div>
            <div class="form-group">
                <label class="form-label" for="last-name1">Last name</label>
                <input  type="text" id="last-name1" class="form-control" name="last-name1">
            </div>
            <div class="form-group">
                <label class="form-label" for="postcode-legend">Postcode</label>
                <div class="help-block" id="help-postcode-legend">Enter your postcode without any spaces. For example, KY169AL.</div>
                <input aria-describedby="help-postcode-legend" type="text" id="postcode-legend" class="form-control form-control--auto-width" name="postcode-legend"size="8">
            </div>
    </fieldset>
</div>

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
Example text input type.
Example email input type.
Example telephone input type.
Example numeric input type.
Example password input type.
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="full-name1">Full name</label>
                <div class="help-block" id="help-full-name1">Example text input type.</div>
                <input aria-describedby="help-full-name1" type="text" id="full-name1" class="form-control" name="full-name1" required>
            </div>
            <div class="form-group">
                <label class="form-label" for="Email1">Email</label>
                <div class="help-block" id="help-Email1">Example email input type.</div>
                <input aria-describedby="help-Email1" type="email" id="Email1" class="form-control" name="Email1" required>
            </div>
            <div class="form-group">
                <label class="form-label" for="Telephone1">Telephone</label>
                <div class="help-block" id="help-Telephone1">Example telephone input type.</div>
                <input aria-describedby="help-Telephone1" type="tel" id="Telephone1" class="form-control" name="Telephone1" required>
            </div>
            <div class="form-group">
                <label class="form-label" for="Number1">Spaces required</label>
                <div class="help-block" id="help-Number1">Example numeric input type.</div>
                <input aria-describedby="help-Number1" type="text" id="Number1" class="form-control form-control--auto-width" name="Number1"size="4" required inputmode="numeric" pattern="[0-9]*">
            </div>
            <div class="form-group">
                <label class="form-label" for="Password1">Password</label>
                <div class="help-block" id="help-Password1">Example password input type.</div>
                <input aria-describedby="help-Password1" type="password" id="Password1" class="form-control" name="Password1" required>
            </div>
</div>

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
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="name1">Name</label>
                <input  type="text" id="name1" class="form-control" name="name1">
            </div>
</div>

Optional fields

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

Example
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="postcode">Postcode (optional)</label>
                <input  type="text" id="postcode" class="form-control form-control--auto-width" name="postcode"size="8">
            </div>
</div>

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
Enter your postcode without any spaces. For example, KY16 9AL.
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="postcode-hint">Postcode</label>
                <div class="help-block" id="help-postcode-hint">Enter your postcode without any spaces. For example, KY16 9AL.</div>
                <input aria-describedby="help-postcode-hint" type="text" id="postcode-hint" class="form-control form-control--auto-width" name="postcode-hint"size="8">
            </div>
</div>

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 
<div class="dpl-form">
    <div class="form-group">
            <button type="submit" class="btn btn-lg btn-primary">Submit</button>
    </div>
</div>

Textarea

Allows for multiple lines of text.

Example
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="textArea">Put additional instructions here</label>
                <textarea  class="form-control" rows="3" id="textArea" name="textArea" ></textarea>
            </div>
</div>

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
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="textArea">Put additional instructions here</label>
                <textarea  class="form-control limit-counter" rows="3" id="textArea" name="textArea" maxlength="125"></textarea>
                <div class="textarea_feedback"></div>
            </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="checkbox-box inline" aria-describedby="help-checkboxes-inline">
            <legend><span class="font-weight--bold">What colours do you like?</span></legend>
            <p class="help-block" id="help-checkboxes-inline">Select all options that apply.</p>
<ul>
                <li>
                    <input  type="checkbox" value="default" id="option1" name="option1-inline">
                    <label for="option1">Gold</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option2" name="option2-inline">
                    <label for="option2">Silver</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option3" name="option2-inline">
                    <label for="option3">Bronze</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="checkbox-box" aria-describedby="help-checkboxes-stacked">
            <legend><span class="font-weight--bold">What colours do you like?</span></legend>
            <p class="help-block" id="help-checkboxes-stacked">Select all options that apply.</p>
<ul>
                <li>
                    <input  type="checkbox" value="default" id="option1-stack" name="option1-stack">
                    <label for="option1-stack">Gold</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option2-stack" name="option2-stack">
                    <label for="option2-stack">Silver</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option3-stack" name="option3-stack">
                    <label for="option3-stack">Bronze</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="checkbox-box checkbox-box--small inline" aria-describedby="help-checkboxes-inline-small">
            <legend><span class="font-weight--bold">What colours do you like?</span></legend>
            <p class="help-block" id="help-checkboxes-inline-small">Select all options that apply.</p>
<ul>
                <li>
                    <input  type="checkbox" value="default" id="option1-inline-small" name="option1-inline-small">
                    <label for="option1-inline-small">Cyan</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option2-inline-small" name="option2-inline-small">
                    <label for="option2-inline-small">Yellow</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option3-inline-small" name="option2-inline-small">
                    <label for="option3-inline-small">Magenta</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option4-inline-small" name="option2-inline-small">
                    <label for="option4-inline-small">Black</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="checkbox-box checkbox-box--small" aria-describedby="help-checkboxes-stacked-small">
            <legend><span class="font-weight--bold">What colours do you like?</span></legend>
            <p class="help-block" id="help-checkboxes-stacked-small">Select all options that apply.</p>
<ul>
                <li>
                    <input  type="checkbox" value="default" id="option1-stack-small" name="option1-stack-small">
                    <label for="option1-stack-small">Red</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option2-stack-small" name="option2-stack-small">
                    <label for="option2-stack-small">Green</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option3-stack-small" name="option3-stack-small">
                    <label for="option3-stack-small">Blue</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

Checkboxes stacked - collapsed list

A large list of stacked checkboxes may be placed in a collapsible container to reduce the amount of scrolling to the next form field.

  • Should not be used if there are fewer than seven checkboxes.
  • Also consider whether the checkboxes may be split into different lists, to shorten their lengths, as this will make the form easier to complete.
  • A text button to expand or collapse the list will toggle the reduced height and scrollbar.
  • An additional text button, visible to keyboard users, provides an option to bypass the list of checkboxes and skip to the next focusable element by linking to its ID. This example uses #radio-inline as the anchor link which is the next option listed on this page.
Example
What colours do you like?

Select all options that apply.

Skip this question

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="checkbox-box" aria-describedby="help-checkboxes-stacked-collapsed">
            <legend><span class="font-weight--bold">What colours do you like?</span></legend>
            <p class="help-block" id="help-checkboxes-stacked-collapsed">Select all options that apply.</p>
            <p class="help-block"><button class="checkbox-box__expand help-block__link">Expand list</button> <a class="sr-only sr-only-focusable checkbox-box__skip help-block__link" href="#radio-inline">Skip this question</a></p>
<ul class="checkbox-box__collapsed">
                <li>
                    <input  type="checkbox" value="default" id="option1-stack-collapsed" name="option1-stack">
                    <label for="option1-stack-collapsed">Gold</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option2-stack-collapsed" name="option2-stack">
                    <label for="option2-stack-collapsed">Silver</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option3-stack-collapsed" name="option3-stack">
                    <label for="option3-stack-collapsed">Bronze</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option4-stack-collapsed" name="option4-stack-collapsed">
                    <label for="option4-stack-collapsed">White</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option5-stack-collapsed" name="option5-stack-collapsed">
                    <label for="option5-stack-collapsed">Black</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option6-stack-collapsed" name="option6-stack-collapsed">
                    <label for="option6-stack-collapsed">Red</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option7-stack-collapsed" name="option7-stack-collapsed">
                    <label for="option7-stack-collapsed">Green</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option8-stack-collapsed" name="option8-stack-collapsed">
                    <label for="option8-stack-collapsed">Blue</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option9-stack-collapsed" name="option9-stack-collapsed">
                    <label for="option9-stack-collapsed">Yellow</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option10-stack-collapsed" name="option10-stack-collapsed">
                    <label for="option10-stack-collapsed">Pink</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
                <li>
                    <input  type="checkbox" value="default" id="option11-stack-collapsed" name="option11-stack-collapsed">
                    <label for="option11-stack-collapsed">Orange</label>
                    <div class="check"><i class="fa fa-check" title="checked"></i></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="radio-button inline" aria-describedby="help-radio-inline">
            <legend><span class="font-weight--bold">How many fudge doughnuts would you like?</span></legend>
            <p class="help-block" id="help-radio-inline">Remember that eating too many doughnuts may be bad for you.</p>
<ul>
                <li>
                    <input  type="radio" value="default" id="option1-radio-inline" name="option-radio-inline">
                    <label for="option1-radio-inline">One</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input  type="radio" value="default" id="option2-radio-inline" name="option-radio-inline">
                    <label for="option2-radio-inline">Two</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input  type="radio" value="default" id="option3-radio-inline" name="option-radio-inline">
                    <label for="option3-radio-inline">Three</label>
                    <div class="check"></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="radio-button" aria-describedby="help-radio-stacked">
            <legend><span class="font-weight--bold">How many fudge doughnuts would you like?</span></legend>
            <p class="help-block" id="help-radio-stacked">Remember that eating too many doughnuts may be bad for you.</p>
<ul>
                <li>
                    <input  type="radio" value="default" id="option1-radio-stack" name="option-radio-stack">
                    <label for="option1-radio-stack">One</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input  type="radio" value="default" id="option2-radio-stack" name="option-radio-stack">
                    <label for="option2-radio-stack">Two</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input  type="radio" value="default" id="option3-radio-stack" name="option-radio-stack">
                    <label for="option3-radio-stack">Three</label>
                    <div class="check"></div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

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.

Code 
<div class="dpl-form">
    <div class="form-group">
        <fieldset class="radio-button conditional" aria-describedby="help-radio-stacked-conditional">
            <legend><span class="font-weight--bold">How many fudge doughnuts would you like?</span></legend>
            <p class="help-block" id="help-radio-stacked-conditional">Remember that eating too many doughnuts may be bad for you.</p>
<ul>
                <li>
                    <input class="conditional-radio" type="radio" value="default" id="option1-radio-conditional" name="conditional">
                    <label for="option1-radio-conditional">One</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input class="conditional-radio" type="radio" value="default" id="option2-radio-conditional" name="conditional">
                    <label for="option2-radio-conditional">Two</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input class="conditional-radio" type="radio" value="default" id="option3-radio-conditional" name="conditional">
                    <label for="option3-radio-conditional">Three</label>
                    <div class="check"></div>
                </li>
                <li>
                    <input class="conditional-radio" type="radio" value="other" id="option4-radio-conditional" name="conditional">
                    <label for="option4-radio-conditional">Other</label>
                    <div class="check"></div>
                </li>
            </ul>
        </fieldset>
        <div class="conditional-content-radio" aria-hidden="true">
            <label class="control-label" for="conditional-input1">Other</label>
            <input class="form-control" id="conditional-input1" name="conditional" type="text">
        </div>
    </div>
</div>

Select box

  • You should try and avoid using select boxes (drop-down lists) as they can be difficult for some users to operate - instead you should use radio buttons or checkboxes where possible.
  • You must only pre-select options for the user if there’s a strong, user-centred reason to do this.
Example

Please select your student status.

Code 
<div class="dpl-form">
            <div class="form-group select-box">
                <label class="form-label" for="select-box">Student status</label>
                <p class="help-block" id="help-select-box">Please select your student status.</p>
                <select class="conditional-select form-control" id="select-box" name="select-box" aria-describedby="help-select-box">
                    <option value="">Please select one of the following…</option>
                    <option value="ug">Undergraduate</option>
                    <option value="pgr">Research postgraduate</option>
                    <option value="pgt">Taught postgraduate</option>
                </select>
            </div>
</div>

Select box with conditional

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

Example

Please select your student status.

Code 
<div class="dpl-form">
            <div class="form-group select-box">
                <label class="form-label" for="select-conditional">Student status</label>
                <p class="help-block" id="help-select-conditional">Please select your student status.</p>
                <select class="conditional-select form-control" id="select-conditional" name="select-conditional" aria-describedby="help-select-conditional">
                    <option value="">Please select one of the following…</option>
                    <option value="ug">Undergraduate</option>
                    <option value="pgr">Research postgraduate</option>
                    <option value="pgt">Taught postgraduate</option>
                    <option value="other">Other</option>
                </select>
                <div class="conditional-content-select" aria-hidden="true">
                    <label class="control-label" for="select-conditional-input">Other</label>
                    <input class="form-control" id="select-conditional-input" type="text">
                </div>
            </div>
</div>

Date picker

Use date picker for inputting date elements.

Example
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="calendar">Pick a date</label>
                <input  type="date" id="calendar" class="form-control datepicker" name="calendar">
            </div>
</div>

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
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="file-input">Upload a file</label>
                <input  type="file" id="file-input" class="" name="file-input">
            </div>
</div>

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
£
.00
Enter only the username part of your email address. For example, kt123.
@st-andrews.ac.uk
Code 
<div class="dpl-form">
            <div class="form-group">
                <label class="form-label" for="price">Price</label>
                <div class="input-group">
                <div class='input-group-addon'>£</div>
                <input  type="text" id="price" class="form-control" name="price">
                <div class='input-group-addon'>.00</div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label" for="email-address">Email address</label>
                <div class="help-block" id="help-email-address">Enter only the username part of your email address. For example, kt123.</div>
                <div class="input-group">
                <input aria-describedby="help-email-address" type="text" id="email-address" class="form-control" name="email-address">
                <div class='input-group-addon'>@st-andrews.ac.uk</div>
                </div>
            </div>
</div>