The autocomplete attribute tells the browser what kind of data a field expects, letting it offer accurate, relevant autofill suggestions from the user's saved information.
Syntax
<input type="email" name="email" autocomplete="email">
<input type="text" name="fname" autocomplete="given-name">Basic Example
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">Browser output: when the user focuses this field, the browser can suggest previously saved email addresses from its own autofill data — genuinely speeding up form completion.
How It Works
autocomplete uses a set of standardized token values, not arbitrary text — the browser matches the token to the correct category of saved data (name, address, payment info) it already stores for the user.
Important Attributes / Common Values
| Value | For |
|---|---|
name, given-name, family-name | Full/first/last name |
email | Email address |
tel | Phone number |
current-password | An existing password, on a login form |
new-password | A new password, on a signup/change-password form |
address-line1, postal-code, country | Address fields |
off | Explicitly discourages autofill — use sparingly, see below |
Real-World Example
<label for="signup-password">Create a Password</label>
<input type="password" id="signup-password" name="password" autocomplete="new-password" minlength="8">new-password tells the browser this is a fresh password to potentially generate and remember, not one to autofill from existing saved credentials — an important, specific distinction from a login form's password field.
Common Mistakes
- Setting
autocomplete="off"broadly to "clean up" a form — this actively discourages password managers, which works against good security practice - Using the wrong token (like
current-passwordon a signup form), causing the browser to offer a mismatched, confusing autofill suggestion
Best Practices
- Add correct, specific
autocompletetokens to every relevant field — name, email, address, phone, and password fields especially - Reserve
autocomplete="off"for genuinely sensitive, non-reusable fields (like a one-time verification code) where autofill would be actively wrong
Accessibility Considerations
Correct autocomplete values are explicitly called out as a WCAG success criterion (1.3.5, "Identify Input Purpose") — this is a genuine, documented accessibility requirement, not just a UX nicety, particularly benefiting users with cognitive or motor disabilities who rely heavily on autofill.
SEO Considerations
No direct ranking effect, though faster, lower-friction forms directly improve real conversion rates.
Browser & Modern HTML Notes
The full list of standardized token values is defined in the HTML spec itself — using a value outside that list simply has no effect, rather than causing an error.
Mini Practice
- Add correct
autocompletevalues to a signup form's name, email, and new-password fields. - Explain, in your own words, the difference between
current-passwordandnew-password.
