Help users avoid re-entering data in forms

After learning about the form element and how to make a form interactive, let's see how you can help users avoid re-entering data.

Make the most of autofill #

Filling out forms can be time-consuming. For example, re-entering your address repeatedly on every site where you want to buy something is not a great shopping experience.

Autofill can help you here. You enter your address once. From now on, your browser will offer you the option to fill in the same address for other forms automatically.

You moved to another city? Don't worry about getting the old address as an option forever. You can edit the address data your browser has saved for you to keep it up-to-date.

How does autofill work in the browser? #

An address field can look very different on different sites. How does a browser know that it is an address field?

Browsers use heuristics to identify an address field. What are the values of the name, type, and id attributes? Is there an autocomplete attribute present on the form control?

Based on this information, browsers can offer the option to autofill a field with previously entered data of the same type. Browsers can even offer to autofill an entire form.

Help browsers with autofill #

Let's see what you can do to help browsers offer the correct autofill options.

Use sensible attribute values #

As you learned, browsers can identify the data type by looking at the attributes of a form control.

<label for="email">Email</label>
<input type="email" name="email" id="email">

Do you have a field where users should enter their email address? Use email as a value for the name, id, and type attribute. Three hints for the browser that this is an email field.

The autocomplete attribute #

There are other examples where it can still be hard for browsers to identify the data type solely from the name, id, and type attributes. You can help here by using the autocomplete attribute.

Have you entered a name before in the browser you're using? The browser will probably offer you the option to fill it in again for this field in the demo.

You can learn more about using autocomplete and autofill in a later module.

Resources #

• The autocomplete attribute
• Autofill: What web devs should know, but don't