We've all come across this particular feature/thing with forms on the web, where the form fields are automatically filled when a particular form field (say, the full name field) is clicked, and sometimes, you just wonder how it happens.
People hate filling out web forms, especially on mobile devices. They can be slow and frustrating to complete and often contain multi-page steps and validation issues.
Well, most folks would say "you've just gotta adjust your preferences in the browser settings". Yeah, that's right! Web browsers have been able to complete text/form-fields automatically for a long time now for the users.
But as a developer, the autocomplete attribute serves as an avenue for you to have control over how the browser responds to/perform some operations on a particular form-field.
The autocomplete attribute too, has been around for quite an amount of years now. The values it could accommodate when it was introduced were off and on. The default value of this (autocomplete) attribute is on. If the value is on it literally means the web browser has the liberty to store values submitted by people. When such values are stored, it enables the browser to autofill/autocomplete those fields when it is being filled again.
As time went by, improvements were made to this feature of web forms (i.e. the autocomplete attribute), thus birthing the addition of new values to the attribute. You can check them here
Common attributes
I'd quickly share some common name attributes of input elements and their corresponding autocomplete attribute(s) below.
If you want a full list of autocomplete attributes to use, kindly click the link in the paragraph above.
The name attribute
| name attribute | autocomplete attribute |
| name, fname, mname, lname | name (full name) given-name (first name) additional-name (middle name) family name (last name) |
<label for="frmNameA">Name</label>
<input
name="name"
id="frmNameA"
placeholder="Full name"
required
autocomplete="name"
>
The email attribute
| name attribute | autocomplete attribute |
<label for="frmEmailA">Email</label>
<input
type="email"
name="email"
id="frmEmailA"
placeholder="name@example.com"
required
autocomplete="email"
>
The phone attribute
| name attribute | autocomplete attribute |
| phone mobile country-code area-code exchange suffix ext | tel |
<label for="frmPhoneNumA">Phone</label>
<input
type="tel"
name="phone"
id="frmPhoneNumA"
placeholder="+1-650- 450-1212"
required
autocomplete="tel">
Conclusion
When you make proper use of the autofill/autocomplete attributes when creating forms for, and on the web, not only will you follow the best practices, but you also increase the UX of people visiting/using your website/web-app.