autocomplete

Browser autofill hints for one-tap form completion. The single most impactful attribute for form conversion on mobile devices.

Overview

The autocomplete attribute tells the browser what kind of data a field expects, enabling one-tap autofill. On mobile, this means users can complete an entire checkout form by tapping a single autofill suggestion instead of typing on a small keyboard.

Getting autocomplete values right is the single highest-impact change you can make for form conversion on mobile devices.

Applies to: <input>, <select>, <textarea>

Personal Information

Value	Purpose
`name`	Full name
`given-name`	First name
`family-name`	Last name
`honorific-prefix`	Title (Mr., Dr., etc.)
`nickname`	Display name or handle
`email`	Email address
`tel`	Full phone number with country code
`tel-national`	Phone number without country code
`bday`	Date of birth
`organization`	Company or organization name
`organization-title`	Job title

<form class="stacked"> <label for="name">Full name</label> <input type="text" id="name" autocomplete="name" /> <label for="email">Email</label> <input type="email" id="email" autocomplete="email" /> <label for="tel">Phone</label> <input type="tel" id="tel" autocomplete="tel" /> <button type="submit">Continue</button> </form>

Address

Prefix address values with shipping or billing to distinguish multiple address forms on the same page.

Value	Purpose
`street-address`	Full street address (may be multiline)
`address-line1`	First line of street address
`address-line2`	Apartment, suite, unit
`address-level2`	City
`address-level1`	State, province, or region
`postal-code`	ZIP or postal code
`country`	Country code
`country-name`	Country name (localized)

<fieldset> <legend>Shipping address</legend> <label for="street">Street address</label> <input type="text" id="street" autocomplete="shipping street-address" /> <label for="city">City</label> <input type="text" id="city" autocomplete="shipping address-level2" /> <label for="state">State</label> <input type="text" id="state" autocomplete="shipping address-level1" /> <label for="zip">ZIP code</label> <input type="text" id="zip" autocomplete="shipping postal-code" inputmode="numeric" /> <label for="country">Country</label> <select id="country" autocomplete="shipping country"> <option value="US">United States</option> <option value="CA">Canada</option> <option value="GB">United Kingdom</option> </select> </fieldset>

Payment

Value	Purpose
`cc-name`	Cardholder name
`cc-number`	Card number
`cc-exp`	Expiration date (MM/YY)
`cc-exp-month`	Expiration month
`cc-exp-year`	Expiration year
`cc-csc`	Security code (CVV/CVC)
`cc-type`	Card type (Visa, Mastercard, etc.)

<fieldset> <legend>Payment</legend> <label for="cc-name">Name on card</label> <input type="text" id="cc-name" autocomplete="cc-name" /> <label for="cc-number">Card number</label> <input type="text" id="cc-number" autocomplete="cc-number" inputmode="numeric" /> <label for="cc-exp">Expiration</label> <input type="text" id="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" /> <label for="cc-csc">Security code</label> <input type="text" id="cc-csc" autocomplete="cc-csc" inputmode="numeric" /> </fieldset>

Authentication

Use current-password for sign-in forms and new-password for registration or password-change forms. This distinction helps password managers generate and store passwords correctly.

Value	Purpose
`username`	Username or account identifier
`current-password`	Existing password (sign-in)
`new-password`	New password (registration or change)
`one-time-code`	SMS or email verification code

<form class="stacked"> <label for="username">Username</label> <input type="text" id="username" autocomplete="username" /> <label for="current-pw">Password</label> <input type="password" id="current-pw" autocomplete="current-password" /> <button type="submit">Sign in</button> </form>  <form class="stacked"> <label for="new-user">Username</label> <input type="text" id="new-user" autocomplete="username" /> <label for="new-pw">Password</label> <input type="password" id="new-pw" autocomplete="new-password" /> <button type="submit">Create account</button> </form>

One-Time Codes

The one-time-code value triggers platform-specific autofill from SMS or email. On iOS, the verification code appears directly in the keyboard suggestions. On Android, it appears as a notification action. Pair with inputmode="numeric" for the right keyboard.

<label for="otp">Verification code</label> <input type="text" id="otp" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" />

Special Values

Value	Effect
`on`	Browser determines the autocomplete type (default)
`off`	Disable autofill for this field

Note: Browsers may ignore autocomplete="off" for login fields. If you need to prevent autofill on a non-login field, use a non-standard value like autocomplete="nope" as a workaround.