Address forms
Help users fill out address forms quickly and easily.
Filling in an address can be time-consuming and frustrating. What is an Address line 2? You may not have a surname, so what should you enter in a Surname field? Avoid these confusions and help users fill out address forms.
Ensure your address form is easy to use #
Many forms use one field for first name and one for surname. However, some people don't have a surname, or their names don't have two parts, so how should they fill in the surname field? Use a single <input>
for the name field. Learn more about handling different name formats.
Also use a single <input>
for the street address–not every address has a street number.
Be careful with form control descriptions. For example, users in the US say ZIP, in the UK postcode. Use <label for="zip">ZIP or postal code (optional)</label>
to make sure users know what data to enter. Make the postal code field optional–not every address has a postal code.
Help users enter their address #
The autocomplete
attribute can help users re-enter their address:
autocomplete="name"
autocomplete="street-address"
autocomplete="postal-code"
autocomplete="country"
You can define multiple values separated by a space for autocomplete
. Say you have a form with a shipping address and another form for a billing address. To tell the browser which postal code is for the billing address, you can use autocomplete="billing postal-code"
. For the shipping address, use shipping
as the first value.
Change the label for the Enter
key on on-screen keyboards with the enterkeyhint
attribute. Use enterkeyhint="done"
for the last form control, and enterkeyhint="next"
for the other form controls.