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
- 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.
- 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.
- 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.
<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.
<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.
<!-- 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.
<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.
<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
<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
<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**.
<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.
<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.
<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.
<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.
<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
Top comments (0)