Boost User Experience with HTML autocomplete Attribute for Form Inputs
Tags: javascript, html, react, beginners
Published: 2024-06-03 05:15:27


Applications developed for the web will eventually run on the web and the browser vendor will always enforce its  default user agent settings for HTML and CSS before being overridden by developer settings. 

Have you ever tried filling out a form on a website only to have the fields instantly filled in for you by the browser? Most browser vendors have capability to  save user input such as password,email and address for later use. The browser will automatically fill in saved details in form inputs the next time a user tries to fill out a form. 


For example, for email addresses, the browser detects type="email" and prefills it with  a saved email address. Fortunately HTML has a less known  handy autofill feature to assist users auto-fill HTML forms with saved values. 

**Autofill** is a form feature attribute that lets the browser suggest and automatically form fields with previously saved values as a user fills out a form. It can also disable the auto filling process. 

It is the most overlooked yet versatile HTML feature  that has been around for several years .  When the user puts text into HTML input elements, the browser can easily save form information and attempt to autocomplete or suggest input the next time.

 The autocomplete keyword can be used to add to  the autofill keyword to HTML  elements `<form>`  and HTML input elements (`<input/>, <textarea> <select/>`).  

Autocomplete can take one or more possible values referred to as tokens. There is a wide range of  possible values for autocomplete attribute depending  data type the user is expected to enter. It is supported by all browser vendors. It initially emanated from the Safari browser.
    
**Importance of autofill** 
1.  **Enhances websites/web app user experience**   -  A user avoids repetitions  and simplifies filling of form fields. When a user types input, the form automatically fills in the input fields  making data entry easier and faster.
2.  **Formatting** - Autofill ensures a form field  always hints at the intended  input type. An email field ,for example, will always hint an email address while a telephone field will always hint digit values.
3.  **It complements the type attribute** – If the type is not present on the HTML input,  the browser will infer input type by using the value of autocomplete attribute. It will format digits where autofill is telephone or one-time-code.

    
On Visual studio code editor, you can see  available autofill values by pressing ctrl/cmd  + space bar on the autocomplete value field. 
    
**NB:** React , JavaScript UI library, uses the camel case  as autoComplete (and not autocomplete) attribute when rendering in react elements.
    
Let's examine some frequently used  autofill values.

**1. on/off**
    
The autofill feature initially started with two values: on and off. By default, the autocomplete attribute is set to on which means that the browser is free to retain values submitted and to autofill them  for the user. 
    The autofill feature initially started with two values: on and off. By default, the autocomplete attribute is set to on which means that the browser is free to retain values submitted and to autofill them  for the user.
    
```html
    <section>
      <!-- Autocomplete off, will not autofill values to form fields-->
      <form autocomplete="off">
        <div>
          <label for="username">Username</label>
          <input type="" id="username"  />
        </div>
        <!-- new password-->
        <div>
          <label for="password">Password</label>
          <input type="password" id="password"  />
        </div>

        <button>Login</button>
      </form>
    </section>
```

**2. Email**
    
The email value instructs the browser that an input field expects a valid email address.  A  browser will detect the type="email" and suggest stored email addresses. Additionally, if the required attribute  is present on the type="email", the browser will require a valid email.
```html
<div>
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email" />
</div>
```
    
    

**3. Password: new-password and current-password**
    
The password value provides a formatted password with asterisks to indicate the password entry field. There are two possible values; **new-password** when  a user wants to enter a new password  and  **current-password** for existing password. 

The browser will recommend saved passwords when the value is current-password  and  it will generate a new password when the value is new-password.
```html
    <!-- current password-->
        <div>
          <label for="current-password">Password</label>
          <input type="password" id="current-password" autocomplete="current-password" />
        </div>
<!-- new password-->
        <div>
          <label for="new-password">Password</label>
          <input type="password" id="new-password" autocomplete="new-password" />
        </div>
```
    

**4. Name**
    
The following possible values are supported by the autofill when entering name variations.
a.) name for full name, 
b.) given-name for first name, 
c.) username,
d.) additional-name for middle name, 
e.) nickname 
f. family name for last name.
    
```html
<div>
<label for="username">Username</label>
<input type="text" id="username" autocomplete="username" />
</div>
```

**5. one-time-code**
    
Majority of web apps use one-time password codes (OTPs) sent by email or SMS to validate user account registration, sign-ins, and online transactions.
    
 Using autocomplete  value one-time-code provides a clue to the useragent to accept  OTP , which consists of  4 to 6  letters and numbers. Note that one-time codes are helpful for suggesting fields like phone numbers, but they should not be used in situations where there is a constant supply of fresh one-time codes.
    
```html
<div>
<label for="otp">Verification code</label>
<input type="text" id="otp" autocomplete="one-time-code" />
</div>
```

**6. Date of birth**
    
The date of birth value has multiple possibilities and lets the user agent hint to the date of birth field.
a.) bday for day,month and year of birth
b.) bday-day for day of the month of birth
c.) bday-month for month of birth
d.) bday-year for  year of birth
    
```html
<div>
<label for="dob">Date of birth</label>
<input type="date" id="dob" autocomplete="bday" />
</div>
```
    

**7. Telephone**

The user can enter a phone number in the input field of type "tel". You can indicate to the browser which phone number components the user needs to enter. There are multiple token values associated with the telephone value. Here are a few of these.

    a.) tel for telephone 
b.) tel-area-code 
c.) tel-country-code
d. tel-extension
e.) tel-local



 ```html
    <div>
          <label for="telephone"> Telephone</label>
          <input type="tel" autocomplete="tel"  id="telephone"/>
        </div>
  ```
    

**8. Organization**

    The organization autofill value has 2 values for representing the organization name and organization title as **organization** and **organization-title**.
    
```html
    <div>
    <label for="org">Organization name</label>
<input  type="text" id="org" autocomplete="organization"/>
</div>
```
    

**9. Country**
    
The country autofill value takes two possible values **country** and **country-name**.
    
```html
<div>
<label for="country">Country</label>
<input  type="text" id="country" autocomplete="country-name"/>
</div>
```
    
    

**10. Address and postal code**

The user agent can determine  the address value of an input field  by using autofill address  value . There are multiple versions available for address levels that begin with **address-level-***.

a.) address-level1,address-level2,address-level3 ,address-level4  for representing administrative addresses based on province,county,city, town or village levels.
b.) address-line1,address-line2,address-line3 ,for representing  physical street address.
    
```html
<div>
    <label for="address">Address</label>
<input  type="text" id="address" autocomplete="address-level1"/>
</div>
```
    

**11. Credit card**

Autofill shines in credit card  payment transactions because it makes it simple for the browser to submit credit card information. It contains multiple values that correspond to credit card information prefixed “cc-*”.
a.) **cc-exp** for card month and year  of expiry.
b.) **cc-exp**-month for card expiry month.
c.) **cc-exp**-year  for card expiry year.
d.) **cc-name** for the full name as it appears on the credit card
e.) **cc-number** for the credit card number.
f.) **cc-type** for type of card; visa or master card.
g.) **cc-family-name** for first name on the card.
h.) **cc-given-name** for last name on the card.
I.) **cc-additional-name** for middle name on the card.
j.) **cc-csc** for the security code on the credit card.
    
```html
<div>
    <label for="card-number">Card number</label>
<input  type="text" id="card-number" autocomplete="cc-number"/>
</div>
```

**12. Sex**

Sex  value is used to suggest gender identity and gender expressions in the select field and  the expected value  is **sex**.
    
```html
    <select autocomplete="sex">
    <option>Male</option>
    <option>Female</option>
</select>
```


In conclusion, you should consider the wide list of autocomplete fields on MDN to be your daily cheat sheet. You should always consider autofill when developing your form input as it is an essential feature that improves user experience. In my opinion, forms and their input fields can be enhanced by autofill.

**Further references**
    
1.    [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete ) 

2.    [Web dev](https://web.dev/leilarn/forms/autofl?hl=en )
3.    [What web devs don’t know : ](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/ )
4.   [Help users avoid re-entering forms](https://web.dev/learn/forms/auto )