The autocomplete attribute's power comes from a standardized, spec-defined token vocabulary — understanding and using it correctly is the difference between a form that autofills flawlessly and one that confuses browsers and users alike.
1A Fixed Vocabulary, Not Free Text
Unlike a class or id value, which can be any string a developer chooses, autocomplete draws from a specific, standardized set of tokens defined by the HTML spec — given-name, family-name, email, tel, street-address, postal-code, cc-number, and dozens more, each with precise, defined meaning.
Using the correct token for each field is what lets browsers and password managers confidently and correctly autofill a form using previously saved user data, dramatically reducing manual data entry — but only when the token accurately matches the spec's defined vocabulary, not an arbitrary guess at what might work.
2new-password Versus current-password
Password fields deserve particular attention: autocomplete="new-password" explicitly signals 'this field is for creating a new password', appropriate on signup and password-change forms. autocomplete="current-password" signals 'this field is for entering an existing password', appropriate on login forms.
Without this distinction, browsers and password managers can behave ambiguously — most notably, a signup form's password field might get autofilled with an old, unrelated saved password rather than allowing (and encouraging, via generated-password suggestions) the creation of a genuinely new one, a confusing and occasionally security-relevant UX failure.
3one-time-code For SMS Verification Flows
autocomplete="one-time-code" is a more specialized but increasingly common token: on supporting mobile browsers, it enables the browser to automatically detect and read a verification code delivered via SMS to the device, filling it directly into the field without requiring the user to manually switch to their messaging app, copy the code, and paste it back.
Combined with inputmode="numeric" (covered in the next lesson) for the correct on-screen keyboard, this represents a meaningfully smoother verification flow than a generic text input, at the cost of just two attributes.
4Step-by-Step Breakdown
Telling The Browser Exactly What Each Field Means. Browsers and password managers can autofill forms remarkably well, but only when a field's autocomplete attribute uses one of dozens of standardized token values telling them precisely what that field represents — name, email, one-time-code, and many more.
autocomplete Uses A Standardized Token Vocabulary. Unlike a class name, autocomplete values aren't arbitrary — the HTML spec defines a fixed vocabulary of tokens like given-name, email, tel, and street-address that browsers and password managers recognize and act on consistently.
The autocomplete Vocabulary. Can a developer use any arbitrary string as an autocomplete value and expect the browser to understand it correctly?
- →Yes, any string works equally well
- →No, only the HTML spec's standardized token vocabulary is recognized and acted on
- →Only English dictionary words are recognized
new-password Prevents Incorrect Autofill On Signup Forms. autocomplete="new-password" specifically tells password managers 'this is a new password being created, not an existing login' — preventing the common, confusing bug where a browser incorrectly autofills a signup password field with an old saved password.
Password Field Autocomplete. Why might a signup form's password field incorrectly get autofilled with an old saved password without the right autocomplete value?
- →It's a random, unpredictable browser bug with no real cause
- →Without autocomplete="new-password", the browser can't distinguish it from a login field
- →This happens regardless of any autocomplete value used
one-time-code Enables SMS OTP Autofill. autocomplete="one-time-code" on mobile browsers can trigger automatic reading and filling of an SMS-delivered verification code, letting users skip manually copying a code from a text message into the form — a meaningful UX improvement for OTP flows.
one-time-code Autocomplete. What UX capability does autocomplete="one-time-code" specifically enable on supporting mobile browsers?
- →It automatically generates a random verification code
- →It can automatically read an incoming SMS verification code and fill the field
- →It has no practical effect on any current browsers
Autocomplete Vocabulary Learned. You now know that autocomplete uses a standardized token vocabulary (not arbitrary text), how new-password versus current-password prevents confusing incorrect autofill, and how one-time-code enables automatic SMS verification code filling on mobile.
Help Browsers Autofill A Field. The autocomplete attribute tells the browser what kind of data belongs in this field.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Correct autocomplete Values Directly Satisfy WCAG 1.3.5 Identify Input Purpose
This success criterion specifically requires programmatically determinable input purpose for common fields, and using standardized autocomplete tokens is the primary way to satisfy it, benefiting both browser autofill and assistive technology.
SEO Implications
- 1
Faster, Easier-To-Complete Forms Reduce Abandonment, An Indirect Engagement Signal
While autocomplete doesn't directly affect search rankings, forms that autofill correctly reduce friction and abandonment, indirectly benefiting the broader engagement metrics search engines may factor into quality assessments.
Best Practices
Use The Correct Standardized Token For Every Common Field Type, Not A Generic Or Omitted Value
It directly enables browser and password-manager autofill, satisfies WCAG 1.3.5, and requires essentially zero additional implementation effort beyond looking up the correct token.
Always Distinguish new-password From current-password Based On Actual Form Context
Getting this specific pair right prevents one of the most common and confusing autofill UX failures in real production forms.
Frequent Bugs
A signup form's password field gets autofilled with the user's old password from a different account.
Add autocomplete="new-password" to correctly signal this is a new-password-creation context, not a login.
A browser's autofill suggestions for a checkout form seem inconsistent or fail to populate address fields correctly.
Verify each address-related field uses its correct standardized token (street-address, postal-code, country, etc.) rather than a generic or omitted autocomplete value.
Real-World Examples
A Correctly Tokenized Signup Form
A signup form where every field uses its correct standardized autocomplete token for maximum autofill reliability.
<input name="firstName" autocomplete="given-name">
<input name="email" type="email" autocomplete="email">
<input name="password" type="password" autocomplete="new-password">