Form
This element represents a document section that contains interactive controls to submit information to a web server.
Open this form example in a new tab.
<form>
<fieldset>
<legend>Personal information</legend>
<div class="field">
<label class="label" for="form-title">Title</label>
<div class="control">
<div class="select">
<select id="form-title" name="form-title">
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
</select>
</div>
<div class="help">Choose a title</div>
</div>
</div>
<div class="field">
<label class="label" for="form-first-name">First name (required)</label>
<div class="control">
<input class="input" id="form-first-name" name="form-first-name" type="text" required aria-required="true" value="" />
<div class="help">Please enter your first name</div>
</div>
</div>
<div class="field">
<label class="label" for="form-last-name">Last name (required)</label>
<div class="control">
<input class="input" id="form-last-name" name="form-last-name" type="text" required aria-required="true" value="" />
<div class="help">Please enter your last name</div>
</div>
</div>
<div class="field">
<label class="label" id="dateLabel" for="form-date-of-birth">Date of birth (dd/mm/yyyy)</label>
<div class="control">
<input class="input" id="form-date-of-birth" name="form-date-of-birth" type="date" value="" />
</div>
</div>
<div class="field">
<label class="label" for="form-email-address">Email address</label>
<div class="control">
<input class="input" id="form-email-address" name="form-email-address" type="email" value="" />
</div>
</div>
<div class="field">
<label class="label" for="form-url">Website</label>
<div class="control">
<input class="input" type="url" id="form-url" name="form-url">
</div>
</div>
<div class="field">
<label class="label" for="form-time">Time</label>
<div class="control">
<input class="input" id="form-time" name="form-time" type="time" value="" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Your home address</legend>
<div class="field">
<label class="label" for="form-address">Address</label>
<div class="control">
<textarea id="form-address" name="form-address" class="textarea"></textarea>
</div>
</div>
<div class="field">
<label class="label" for="form-town">Town</label>
<div class="control">
<input class="input" id="form-town" name="form-town" type="text" value="" />
</div>
</div>
<div class="field">
<label class="label" for="form-postcode">Postcode</label>
<div class="control">
<input class="input" id="form-postcode" name="form-postcode" type="text" value="" />
</div>
</div>
<div class="field">
<label class="label" for="form-country">Country</label>
<div class="control">
<div class="select">
<select id="form-country" name="form-country">
<option value="">Select</option>
<option value="England">England</option>
<option value="Scotland">Scotland</option>
<option value="Wales">Wales</option>
</select>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Which type of course did you study with us?</legend>
<div class="field">
<div class="control">
<label class="radio">
<input name="form-course" type="radio" value="Undergraduate degree" />
Undergraduate degree
</label>
<label class="radio">
<input name="form-course" type="radio" value="Postgraduate degree" />
Postgraduate degree
</label>
<label class="radio">
<input name="form-course" type="radio" value="ACCA" />
ACCA
</label>
</div>
</div>
</fieldset>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button brookes-primary">Submit</button>
</div>
</div>
</form>
Forms should be clear and simple. Only ask for information you absolutely need.
- They should be organized in a logical manner.
- Provide clear instructions about what information is desired.
- If you ask for optional information, mark the labels of optional fields with '(optional)'
- Do not mark mandatory fields with asterisks.
The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Ensure you always add a <label> to every form control.
Only hide labels using the sr-only class if the surrounding context makes them unnecessary.
Do not use a placeholder attribute in form fields, as this will disappear once the content is entered into the field. Use help text instead, this will always be shown.