Help users avoid re-entering data in forms
Make it more convenient for users to fill out 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? #
- Chrome true, Supported ✅
- Firefox true, Supported ✅
- Edge ≤79, Supported ≤79
- Safari, Not supported
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.
Based on which attributes is autofill offered?
Thename
attribute. The type
attribute The autocomplete
attribute All of the above Correct, browsers offer autofill based on this attribute among others.
Correct, browsers offer autofill based on this attribute among others.
Correct, browsers offer autofill based on this attribute among others.
Correct, all the mentioned attributes help browsers offering autofill.