Form

Address input

Published on

Description

Address fields capture physical address information. Group address fields inside a <fieldset> with a <legend> to provide context for the related fields.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <fieldset class="address">
    <div><label for="street-address">Street address</label> <span id="street-address-hint">#000, 123 Home Street</span> <input value="" id="street-address" name="street-address" dir="auto" autocapitalize="off" autocomplete="street-address" autocorrect="off" spellcheck="false" type="text" aria-describedby="street-address-hint" /> </div>
    <div><label for="city">City</label> <input value="" id="city" name="city" dir="auto" autocapitalize="off" autocomplete="address-level2" autocorrect="off" spellcheck="false" type="text" /> </div>
    <div><label for="postal-code">Postal code, postcode, or ZIP</label> <span id="postal-code-hint">A1A 1A1</span> <input value="" id="postal-code" name="postal-code" dir="auto" autocapitalize="off" autocomplete="postal-code" autocorrect="off" spellcheck="false" type="text" aria-describedby="postal-code-hint" /> </div>
    <div><label for="country">Country or region</label>
      <div><select id="country" name="country" autocapitalize="off" autocomplete="country" autocorrect="off" spellcheck="false">
          <option label="Canada" value="CA"></option>
        </select></div>
    </div>
  </fieldset> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-address" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use <fieldset> and <legend> to group address fields. The legend text should describe the address purpose (e.g. "Shipping address").
  • Use appropriate autocomplete values for each field (street-address, address-line1, address-line2, address-level2 for city, address-level1 for state/province, postal-code, country).
  • Each field must have its own explicit <label for="id"> association.

References

Variables

None for input