Using an address lookup
An address lookup (sometimes called a ‘postcode lookup’) lets users specify a UK address by entering their postcode (and optionally their street name or number) and selecting their address from a list.
Back to patterns
Ask users for... Addresses
Step one
Example
What is your address?
HTML Snippet for address lookup step one
<h1 class="heading-large">What is your address?</h1>
<form>
<div class="form-group">
<label class="form-label form-label-bold form-label-large" for="postcode">Enter your postcode</label>
<input data-val="true" data-val-required="Please enter a valid Leeds postcode e.g. LS6 2SB" id="postcode" name="postcode" type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Find address</button>
</form>Step two
Example
What is your address?
HTML Snippet for address lookup step two
<h1 class="heading-large">What is your address?</h1>
<form>
<div class="form-group postcode-completed">
<input data-val="true" data-val-required="Please enter a valid Leeds postcode e.g. LS6 2SB" id="Postcode" name="Postcode" type="hidden" value="LS6 2SB">
<label class="form-label form-label-bold form-label-large" for="Postcode">Postcode</label>
<p>LS6 2SB</p>
<a href="#">Change</a>
</div>
<div class="form-group">
<label class="form-label form-label-bold form-label-large" for="select-address">Select your address</label>
<select class="form-control" id="select-address" name="select-address">
<option>3 addresses have been found</option>
<option>1 Rawling Way, Leeds LS6 2SB</option>
<option>2 Rawling Way, Leeds LS6 2SB</option>
<option>3 Rawling Way, Leeds LS6 2SB</option>
</select>
<a class="form-group-link" href="#">I can't find my address on the list</a>
</div>
<button class="btn btn-primary" type="button">Continue</button>
</form>Manual input
Manual address input. This is used for date specific questions. e.g. moving in and out of address.
Example
Address Details
HTML Snippet for manual input
<h1 class="heading-large">Address Details</h1>
<form>
<fieldset>
<div class="form-group">
<label class="form-label form-label-bold" for="address-line-1">Address Line 1</label>
<input data-val="true" data-val-required="Please Enter an address line 1" id="address-line-1" name="address-line-1" type="text" class="form-control">
</div>
<div class="form-group">
<label class="form-label form-label-bold" for="address-line-2">Address Line 2</label>
<input data-val="true" id="address-line-2" name="address-line-2" type="text" class="form-control">
</div>
<div class="form-group">
<label class="form-label form-label-bold" for="town-or-city">Town or City</label>
<input data-val="true" data-val-required="Please enter a Town or City" id="town-or-city" name="town-or-city" type="text" class="form-control">
</div>
<div class="form-group">
<label class="form-label form-label-bold" for="postcode">Enter your postcode</label>
<input data-val="true" data-val-required="Please enter a valid Leeds postcode e.g. LS6 2SB" id="postcode" name="postcode" type="text" class="form-control">
</div>
</fieldset>
<div class="form-group">
<fieldset>
<legend>
<span class="form-label-bold">Date moved in</span>
<span class="form-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dmi-day">Day</label>
<input class="form-control" id="dmi-day" name="dmi-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dmi-month">Month</label>
<input class="form-control" id="dmi-month" name="dmi-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dmi-year">Year</label>
<input class="form-control" id="dmi-year" name="dmi-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset>
<legend>
<span class="form-label-bold">Date moved out</span>
<span class="form-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dmo-day">Day</label>
<input class="form-control" id="dmo-day" name="dmo-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dmo-month">Month</label>
<input class="form-control" id="dmo-month" name="dmo-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dmo-year">Year</label>
<input class="form-control" id="dmo-year" name="dmo-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
</div>
</div>
</fieldset>
</div>
<button class="btn btn-primary" type="button">Add Address</button>
</form>Address listing
Example
Previous addresses
Address
Date moved in
Date moved out
HTML Snippet for address listing
<h1 class="heading-large">Previous addresses</h1>
<div class="address__headings">
<h3>Address</h3>
<h3>Date moved in</h3>
<h3>Date moved out</h3>
</div>
<form class="address disabledInput">
<div class="address__group">
<h3 class="mobileEnabled">Address</h3>
<fieldset class="disabled">
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="address-line-1">Address Line 1</label>
<input disabled data-val="true" data-val-required="Please Enter an address line 1" id="address-line-1" name="address-line-1" type="text" class="form-control" placeholder="Address Line 1" value="1 Rawling Way">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="address-line-2">Address Line 2</label>
<input disabled data-val="true" id="address-line-2" name="address-line-2" type="text" class="form-control" value="Headingley" placeholder="Address Line 2">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="town-or-city">Town or City</label>
<input disabled data-val="true" data-val-required="Please enter a Town or City" id="town-or-city" name="town-or-city" type="text" class="form-control" placeholder="Leeds" value="Leeds">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="postcode">Enter your postcode</label>
<input disabled data-val="true" data-val-required="Please enter a valid Leeds postcode e.g. LS6 2SB" id="postcode" name="postcode" type="text" class="form-control" placeholder="Post code" value="LS6 2SB">
</div>
</fieldset>
</div>
<div class="address__group">
<h3 class="mobileEnabled">Date moved in</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dmi-day">Day</label>
<input class="form-control" id="dmi-day" name="dmi-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dmi-month">Month</label>
<input class="form-control" id="dmi-month" name="dmi-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dmi-year">Year</label>
<input class="form-control" id="dmi-year" name="dmi-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2020" disabled>
</div>
</div>
</fieldset>
</div>
<div class="address__group">
<h3 class="mobileEnabled">Date moved out</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dmo-day">Day</label>
<input class="form-control" id="dmo-day" name="dmo-day" type="text" inputmode="numeric" placeholder="D" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dmo-month">Month</label>
<input class="form-control" id="dmo-month" name="dmo-month" type="text" inputmode="numeric" placeholder="M" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dmo-year">Year</label>
<input class="form-control" id="dmo-year" name="dmo-year" type="text" inputmode="numeric" placeholder="Y" pattern="[0-9]*" minlength="4" maxlength="4" value="2021" disabled>
</div>
</div>
</fieldset>
</div>
<div class="address__group address__group--full">
<a href="#" class="form-group-link address--edit" type="button">Edit</a> / <a href="#" class="form-group-link address--remove" type="button">Remove</a>
</div>
</form>
<hr/>
<form class="address disabledInput">
<div class="address__group">
<h3 class="mobileEnabled">Address</h3>
<fieldset class="disabled">
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="address-line-1">Address Line 1</label>
<input disabled data-val="true" data-val-required="Please Enter an address line 1" id="address-line-1" name="address-line-1" type="text" class="form-control" placeholder="Address Line 1" value="1 Rawling Way">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="address-line-2">Address Line 2</label>
<input disabled data-val="true" id="address-line-2" name="address-line-2" type="text" class="form-control" value="Headingley" placeholder="Address Line 2">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="town-or-city">Town or City</label>
<input disabled data-val="true" data-val-required="Please enter a Town or City" id="town-or-city" name="town-or-city" type="text" class="form-control" placeholder="Leeds" value="Leeds">
</div>
<div class="form-group">
<label class="form-label form-label-bold sr-only" for="postcode">Enter your postcode</label>
<input disabled data-val="true" data-val-required="Please enter a valid Leeds postcode e.g. LS6 2SB" id="postcode" name="postcode" type="text" class="form-control" placeholder="LS6 2SB" value="LS6 2SB">
</div>
</fieldset>
</div>
<div class="address__group">
<h3 class="mobileEnabled">Date moved in</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dmi-day">Day</label>
<input class="form-control" id="dmi-day" name="dmi-day" type="text" inputmode="numeric" pattern="[0-9]*" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dmi-month">Month</label>
<input class="form-control" id="dmi-month" name="dmi-month" type="text" inputmode="numeric" pattern="[0-9]*" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dmi-year">Year</label>
<input class="form-control" id="dmi-year" name="dmi-year" type="text" inputmode="numeric" pattern="[0-9]*" value="2020" disabled>
</div>
</div>
</fieldset>
</div>
<div class="address__group">
<h3 class="mobileEnabled">Date moved out</h3>
<fieldset class="disabled">
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label sr-only" for="dmo-day">Day</label>
<input class="form-control" id="dmo-day" name="dmo-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-month">
<label class="form-label sr-only" for="dmo-month">Month</label>
<input class="form-control" id="dmo-month" name="dmo-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2" value="01" disabled>
</div>
<div class="form-group form-group-year">
<label class="form-label sr-only" for="dmo-year">Year</label>
<input class="form-control" id="dmo-year" name="dmo-year" type="text" inputmode="numeric" pattern="[0-9]*" value="2021" disabled>
</div>
</div>
</fieldset>
</div>
<div class="address__group address__group--full">
<a href="#" class="form-group-link address--edit" type="button">Edit</a> / <a href="#" class="form-group-link address--remove" type="button">Remove</a>
</div>
</form>
<hr/>
<button class="btn btn-primary" type="button">Continue</button>