Guidance
Asking for an address in a consistent way provides a better experience for your users. This can help them avoid mistakes, so the data you collect will be more accurate.
This form pattern uses multiple inputs to collect Canadian address information. The
<form> element has autocomplete="on" to allow users to reuse a
previously entered address.
For real-time address verification we recommend Canada Post's AddressComplete. This simplifies the experience for users and ensures the address data you receive is accurate.
If you use AddressComplete with this form, set autocomplete="off" so the browser
autocomplete won't overlap the Canada Post address lookup.
Address form
HTML
<!-- Canadian address form -->
<form autocomplete="on">
<label for="address">Address</label>
<input id="address" name="address" type="text" autocomplete="address-line1" placeholder="Street address or P.O. box" required>
<label for="address-line2"><span class="sr-only">Address line 2</span></label>
<input id="address-line2" name="address-line2" type="text" placeholder="Optional: Apartment, suite, building etc.">
<label for="community">City, town or community</label>
<input id="community" name="address-level2" autocomplete="address-level2" type="text">
<!-- Select province -->
<label for="province-en">Choose your province:</label>
<select name="address-level1" id="province-en">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB" selected>New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
<!-- Basic postal code field with validation -->
<div class="gnb-form-input">
<label for="postal-code">Postal code<span class="required">*</span><span
class="sr-only">required</span></label>
<input id="postal-code" class="gnb-postal-code-field" name="postal-code"
autocomplete="postal-code" type="text" maxlength="7" required placeholder="A1A 1A1"
oninput="formatPostalCode(this)">
<div class="gnb-form-validation" id="postal-code-error" style="display: none;">
</div>
</div>
</form>
<!-- Don't forget to add gnb-forms-validation-1.0.0.js at the bottom of your page before the closing </body> tag -->