Close

Form

Forms include interactive controls to submit information to a web server.

An example using all the form elements available.
Personal information
Choose a title
Please enter your first name
Please enter your last name
Your home address
Which type of course did you study with us? 
<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>

Usage

Forms should be clear and simple and should only ask for information that you absolutely need. In addition, remember the following:

  • organize the form in a logical manner
  • provide clear instructions about what information is required
  • 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.

Accessibility

Always make sure you 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 as this will always be shown.

If you have any questions or suggestions for improvements, please contact the Web Team.