HTML Autocomplete Attribute

The autocomplete attribute controls whether the browser may automatically fill in a form field for the user. When it is enabled and the user starts typing, the browser suggests values it has saved from earlier submissions (names, emails, addresses, and so on) so the field can be completed with one tap or click.

This page covers the two basic values (on and off), the named autofill tokens that tell the browser exactly what kind of data a field holds, when you should turn autocomplete off, and the security and accessibility trade-offs involved.

Tip

The autocomplete attribute can be set on the <form> element to apply to all of its fields, then overridden on individual <input> fields. So you can have it on for the form and off for one sensitive field, or vice versa.

Tip

Note: The autocomplete attribute works with <input> types such as text, search, tel, url, password, email, range, and color.

Syntax

Syntax of HTML Autocomplete Attribute

<input autocomplete="on|off">

You can also use a named token instead of on/off to describe the exact field purpose:

<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">

Applies to	`<form>` and `<input>` elements.

Example of the HTML autocomplete attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get" autocomplete="on">
      <div>
        <label for="name">Enter Your Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="phone">Enter Your Phone Number:</label>
        <input type="number" id="phone" name="phone-number" />
        <br />
      </div>
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Example of the HTML `<form>` tag where the autocomplete attribute is on:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" autocomplete="on">
      <input type="text" name="name" placeholder="Enter your Name" autofocus />
      <input type="text" name="surname" placeholder="Enter your Surname" />
      <input type="number" name="age" placeholder="Enter your Age" />
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Using named autofill tokens

Instead of just on or off, you can give each field a token that describes what kind of value it holds. The browser then offers the right saved data (the user's email, their shipping address, a new password it can generate, and so on). Named tokens make autofill far more accurate than a generic on.

The example below combines an address form with a login section. Note autocomplete="email" for the email field and autocomplete="new-password" for the sign-up password, which signals the browser to suggest a freshly generated password rather than an existing one.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label { display: block; margin-top: 10px; }
      input { padding: 8px; width: 240px; }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post" autocomplete="on">
      <label for="fullname">Full name</label>
      <input type="text" id="fullname" name="fullname" autocomplete="name" />

      <label for="email">Email</label>
      <input type="email" id="email" name="email" autocomplete="email" />

      <label for="street">Street address</label>
      <input type="text" id="street" name="street" autocomplete="address-line1" />

      <label for="city">City</label>
      <input type="text" id="city" name="city" autocomplete="address-level2" />

      <label for="zip">Postal code</label>
      <input type="text" id="zip" name="zip" autocomplete="postal-code" />

      <label for="password">Create a password</label>
      <input type="password" id="password" name="password" autocomplete="new-password" />

      <input type="submit" value="Sign up" />
    </form>
  </body>
</html>

Common autofill tokens

The HTML standard defines more than 50 autofill tokens. The table below lists the ones you will use most often. For the full, authoritative list see the WHATWG autofill specification.

Token	Field purpose
`name`	Full name
`given-name`	First name
`family-name`	Last (family) name
`nickname`	Nickname or screen name
`username`	Account login name
`email`	Email address
`tel`	Full telephone number
`street-address`	Full street address (multi-line)
`address-line1`	First line of the street address
`address-line2`	Second line (apartment, suite)
`address-level2`	City or town
`address-level1`	State, province, or region
`postal-code`	Postal or ZIP code
`country`	Country code (e.g. `US`)
`country-name`	Country name
`cc-name`	Name printed on the payment card
`cc-number`	Payment card number
`cc-exp`	Card expiration date
`cc-csc`	Card security code (CVC/CVV)
`current-password`	Existing password (for login)
`new-password`	A new password (for sign-up or change)
`one-time-code`	One-time verification code (OTP)
`bday`	Full birthday date

When (and why) to turn autocomplete off

Most of the time you should leave autocomplete enabled, because it saves typing and reduces errors. There are a few legitimate reasons to disable it:

One-time and sensitive codes. Fields for one-time passwords, CAPTCHA answers, or other values that should never be remembered are good candidates. For an OTP field, prefer autocomplete="one-time-code" over off, so mobile devices can still suggest the code from an SMS while not storing it permanently.
Custom autofill UI. If your app provides its own suggestion dropdown (for example a city or product search backed by <datalist> or a JavaScript widget), the browser's native autofill can interfere, so you may turn it off.
Shared or kiosk devices, privacy. On public terminals you may not want the browser to retain or pre-fill personal data for the next user.

Warning

Gotcha: autocomplete="off" is only a hint. For password fields, Chrome and Safari often ignore it so their built-in password managers can keep working, which is considered a security feature. To stop the browser from suggesting an existing saved password, use autocomplete="new-password" on the relevant field rather than off.

Security note: disabling autocomplete does not make a form more secure. Saved data still lives in the browser's password manager, and forcing users to type long passwords by hand encourages weak, reused passwords. The safer pattern is to label fields with the correct tokens (current-password, new-password, one-time-code) so password managers and the browser handle the data sensibly.

Accessibility and UX

Named autofill tokens are an accessibility feature, not only a convenience:

They satisfy WCAG 2.1 Success Criterion 1.3.5 "Identify Input Purpose," which asks that the purpose of common form fields be programmatically identifiable.
They let password managers fill credentials reliably and let mobile browsers show the right on-screen keyboard.
Turning autocomplete off can be a barrier for users with cognitive disabilities, motor impairments, or memory difficulties, who rely on saved values to complete forms. Disable it only when there is a real reason to.

Related: autofocus moves the cursor to a field on load, and the <input> chapter covers the field types these tokens pair with.

Practice

What does the autocomplete attribute in HTML do?

It lets the browser suggest and fill in a field based on values the user entered earlier.It changes the color of the text within the input field.It validates the email format before the form is submitted.It restricts the type of input that can be entered in the field.It resets the input field to its default value.