Having to re-enter your address for the tenth time is tiring. Browsers, and you,
as a developer, can help users enter data faster, and avoid re-entering data.
This module teaches you how autofill works, and how `autocomplete` and other
element attributes can ensure that browsers offer appropriate autofill options.
## How does autofill work?
In the [intro to autofill](https://web.dev/learn/forms/auto), you already learned the basics of
autofill. But why do browsers offer autofill?
Filling out forms isn't an interesting activity, but still something you do
often. Over time, you fill out many forms, and you often fill in the same data.
One way to help users fill out forms faster is by offering them the option to
automatically fill in form fields with previously entered data. That's autofill.
How do browsers know what data to autofill? Take a look at an example form
field to find out.
If you submit this form field, browsers store the value (the data you entered)
along with the value of the `name` attribute (name). Some browsers also look at
the `id` attribute when storing and filling in data.
Say, weeks later, you fill out another form on another website. This site also
contains a form field with `name="name"`. Your browser can now offer autofill,
because a value for name is already stored.
> [!NOTE]
> **Note:** Use the [`:autofill`](https://developer.mozilla.org/docs/Web/CSS/:autofill) CSS pseudo-class to style form controls that the browser has autofilled. Use `:autofill` and the prefixed version `:-webkit-autofill` for best browser compatibility.
Autofill is especially useful in forms you regularly use, such as sign-up and
sign-in, payment, checkout, and forms where you have to enter your name or
address.
You can help browsers offer the best autofill options by using appropriate
values for the `autocomplete` attribute. There are many possible values for `autocomplete`. Here is an example of addresses.
Does your browser already have an address saved for you? Great! After you
interact with the first field in the address form, the browser shows you a list
of saved addresses. You can choose one, and the browser fills in all fields
related to the address. Autofill makes filling out forms faster and easier.
Not every address form has the same fields, and the order of fields also varies.
Using the correct values for `autocomplete` ensures that the browser fills in
the correct values for a form. There are values for `country`, `postal-code`,
and [many
more](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete#values).
> [!NOTE]
> **Note:** You can define multiple values separated by a space for `autocomplete`. Say, you have a form with a shipping address and another form for a billing address. To tell the browser which is the postal code for the billing address, you can use `autocomplete="billing postal-code"`. For the shipping address, use `shipping` as the first value.
## Ensure users can sign in fast and use secure passwords
Many people aren't good at remembering passwords. The [most common
password](https://en.wikipedia.org/wiki/List_of_the_most_common_passwords) is
'123456', followed by other easy-to-remember combinations. How can you use
secure and unique passwords without remembering them all?
Browsers have built-in passwords managers to generate, save, and fill in
passwords for you. See how you can help browsers with auto-filling emails
and managing passwords.
You can use `autocomplete="email"` for an email field, so users get the autofill
option for an email address.
As this is a sign-up form, users shouldn't get the option to fill in previously
used passwords. You can use `autocomplete="new-password"` to ensure browsers
offer the option to generate a new password.
> [!NOTE]
> **Note:** To ensure a secure sign-up form it may be better to use a [third-party identity provider](https://web.dev/articles/sign-up-form-best-practices#federated-login), instead of building your own [authentication](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html) system.
On the sign-in form, you can use `autocomplete="current-password"` to tell
browsers to offer the option to fill in previously saved passwords for this
website.
You can set up two-factor authentication on many websites. In addition to the
password, a one-time code is sent with SMS or a two-factor authentication app.
Wouldn't it be great if the code you received in the SMS message was suggested
by the on-screen keyboard, and you could directly select it to fill in the
value? On Safari 14 or later, you can use
[`autocomplete="one-time-code"`](https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element)
to achieve this. On Chrome on Android, you can use the [WebOTP
API](https://developer.chrome.com/docs/identity/web-apis/web-otp) to achieve
this with JavaScript.
Learn more about how to verify phone numbers on the web with the [SMS OTP form
best practices](https://web.dev/articles/sms-otp-form).
**Caution** : SMS isn't the most secure method of authentication by itself, because phone numbers can be recycled and hijacked. Consider using other two-factor authentication methods or [multi-factor authenticatio](https://developer.chrome.com/docs/identity/webauthn).
## Help users fill in their credit card information
On many ecommerce websites, you can use your credit card to purchase products.
Sites may use third-party payment platforms that provide their own forms, but if
you do need to build your own payment forms, make sure people can easily fill in
payment information.
You can use the `autocomplete` attribute again, to ensure browsers offer the
correct autofill options.
There are values for the credit card number `cc-number`, credit card expiration
date `cc-exp`, and [all other information
needed](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete#values)
for a credit card payment.
Use a single input for numbers such as credit card numbers and telephone
numbers, to ensure browsers offer autofill. Use standard form elements, for
example, a `