Form
- Apply
class="scc-form"to the<form>element. - For Squiz Matrix forms, this is done via the Form Extra Attribute field on the Form Contents screen.
Rows
- Each form label and accompanying field should be placed in a
<div>with the scc-form__row class. - Use Boostrap rows and columns only when required to align fields next to one another.
- The scc-form__row class controls vertical spacing (margin) between rows/groups. It can appear within a Bootstrap column but should not be omitted.
Examples
An example of a form row that will span the full width of the parent container.
<div class="scc-form__row">
<label class="scc-form__label" for="firstName">First name</label>
<input class="scc-form__input" name="firstName" id="firstName" required="required" />
<span class="scc-form__error-inline">...</span>
</div> An example of two form rows that are aligned side-by-side on certain viewports using the Bootstrap grid.
<div class="row">
<div class="col-12 col-sm-6">
<div class="scc-form__row">
<label class="scc-form__label" for="firstName">First name</label>
<input class="scc-form__input" name="firstName" id="firstName" required="required" />
<span class="scc-form__error-inline">...</span>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="scc-form__row">
<label class="scc-form__label" for="lastName">Last name</label>
<input class="scc-form__input" name="lastName" id="lastName" required="required" />
<span class="scc-form__error-inline">...</span>
</div>
</div>
</div>Elements
- Apply classes to all form controls/elements where possible, including the following. For Squiz Matrix forms, this is done via the Extras field on the Details screen of each individual question asset.
scc-form__inputscc-form__radioscc-form__checkboxscc-btn
- Apply a space and trailing slash to self-closing elements, eg.
<input />and<br />. - Labels should always appear before (above) the corresponding field, with the exception of radio buttons and checkboxes.
- Radio buttons and checkboxes:
- Should be positioned before (to the left) of the corresponding label.
- Should be wrapped in a
<fieldset>with a corresponding<legend>. - Should always be aligned vertically.
- All input elements in the collection should have the same name but a unique id.
- Textarea elements require a sensible width/height (expressed using the cols and rows attributes)
for situations when CSS styles are disabled. In most casescols="100" and rows="10"should suffice.
Examples
Text field
<div class="scc-form__row">
<label class="scc-form__label" for="fullName">Name>/label>
<input class="scc-form__input" name="fullName" id="fullName" required />
<span class="scc-form__error-inline">Please enter your name.</span>
</div>
Telephone field
<div class="scc-form__row">
<label class="scc-form__label" for="telephone">Telephone</label>
<input class="scc-form__input" name="telephone" id="telephone" required />
<span class="scc-form__error-inline">Please enter your telephone number.</span>
</div>Email field
<div class="scc-form__row">
<label class="scc-form__label" for="email">Email address</label>
<input class="scc-form__input" name="email" id="email" required />
<span class="scc-form__error-inline">Please enter a valid email address.</span>
</div>Radio button
<div class="scc-form__row">
<fieldset class="scc-form__fieldset">
<legend class="scc-form__legend">Do you like cake?</legend>
<ul>
<li>
<input class="scc-form__input--radio" name="cakes" id="yesToCake" required value="Yes" />
<label for="yesToCake">Yes</label>
</li>
<li>
<input class="scc-form__input--radio" name="cakes" id="noToCake" required value="No" />
<label for="noToCake">No</label>
</li>
</ul>
<span class="scc-form__error-inline">Please choose an option.</span>
</fieldset>
</div> Checkbox
<div class="scc-form__row">
<fieldset class="scc-form__fieldset">
<legend class="scc-form__legend">What cakes do you like?</legend>
<span class="scc-form__note">Tick all options that apply.</span>
<ul>
<li>
<input class="scc-form__input--checkbox" name="cakes" id="carrotCake" required value="Carrot" />
<label for="carrotCake">Carrot</label>
</li>
<li>
<input class="scc-form__input--checkbox" name="cakes" id="chocolateCake" required value="Chocolate" />
<label for="chocolateCake">Chocolate</label>
</li>
</ul>
<span class="scc-form__error-inline">Please choose at least one option.</span>
</fieldset>
</div>Select field
<div class="row">
<div class="col-12 col-md-6">
<div class="scc-form__row">
<label class="scc-form__label" for="cakes">What is your favourite cake?</legend>
<select name="cakes" id="cakes">
<option value="Carrot">Carrot</option>
<option value="Chocolate">Chocolate</option>
</select>
<span class="scc-form__error-inline">Please choose an option.</span>
</div>
</div>
</div> Multiple-select field
<div class="row">
<div class="col-12 col-md-6">
<div class="scc-form__row">
<label class="scc-form__label" for="cakes">Which cakes do you buy most often?</label>
<span class="scc-form__note">Select all options that apply.</span>
<select class="scc-form__select" id="cakes" multiple="multiple" name="cakes" required size="3">
<option value="Carrot">Carrot</option>
<option value="Chocolate">Chocolate</option>
<option value="Coffee and walnut">Coffee and walnut</option>
<option value="Lemmon drizzle">Lemmon drizzle</option>
<option value="Red velvet">Red velvet</option>
</select>
<span class="scc-form__error-inline">Please choose at least one option.</span>
</div>
</div>
</div> Textarea
<div class="scc-form__row">
<label class="scc-form__label" for="comments">Comments</label>
<textarea class="scc-form__textarea" cols="100" id="comments" name="comments" required rows="10"></textarea>
<span class="scc-form__error-inline"></span>
</div> Attributes
- Attributes should be arranged in alphabetical order for improved readability, for example:
<input autocomplete="" class="" id="" name="" required value="" /> - Classes and IDs should be written using kebab-case or camelCase, unless a third-party system requires otherwise.
Autocomplete
To aid accessibility and usability, use an appropriate where possible.
Below are some common autocomplete values:
- Title, such as "Mr" or "Miss" etc:
autocomplete="honorific-prefix" - Full name:
autocomplete="name" - Surname or last name:
autocomplete="family-name" - First name:
autocomplete="given-name" - Email address:
autocomplete="email" - Telephone number, without country code:
autocomplete="tel-national" - House and street:
autocomplete="address-line1" - Locality (optional):
autocomplete="address-line2" - Postal town:
autocomplete="address-level1" - Postcode:
autocomplete="postal-code"
Buttons
- If possible, use a
<button>element rather than an<input>with the appropriate type attribute. - Avoid using the name attribute on buttons (unless a third-party system requires otherwise).
- Use the word Submit as the text value, unless something else is more appropriate.
- Next and previous buttons should use the
<button>element with the relevant class attributes, for example:class="scc-btn scc-btn--previous"orclass="scc-btn scc-btn--forward". Use the words Next or Previous as the text values.
Validation
- Use the appropriate type of email or tel for email and telephone fields.
- Use
requiredfor all fields that are mandatory. - Do not use asterisks to visually denote mandatory fields. Instead, append (optional) to the end of the label or legend of any non-mandatory fields.