Filling in an address can be time-consuming and frustrating. What is Address line 2 for? 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.
Build a user-friendly form
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.
According to research,
Address line 2 can be confusing for users. Consider using a <textarea>
for the whole address, or hide the Address line 2 field behind a reveal <button>.
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.