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
email	email

<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.