Typing on a phone is slow and error-prone. Three attributes make forms much faster to complete: autocomplete lets the browser fill in known details, inputmode picks the on-screen keyboard, and enterkeyhint labels the Enter key. None of them change validation or what is sent; they only help people get the data in.
autocomplete
Browsers remember names, addresses, email addresses, phone numbers and payment cards. The autocomplete attribute tells them exactly which piece of information a field wants:
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">Browsers try to guess from name, id and label text, but the guesses are often wrong. An explicit token removes the guesswork, and with one tap the whole form can be filled correctly.
It also helps accessibility. WCAG success criterion 1.3.5 (Identify Input Purpose) asks that fields collecting information about the user identify their purpose, and the autocomplete tokens are how HTML does that. People with cognitive or motor impairments benefit most from not having to type.
Common tokens
| Token | Field |
|---|---|
name | Full name in one field |
given-name, family-name | First and last name in separate fields |
email | Email address |
tel | Full phone number including country code |
organization | Company name |
street-address | Full street address in one textarea |
address-line1, address-line2 | Street address split over lines |
address-level2 | Town or city |
postal-code | Postcode or ZIP code |
country-name | Country |
bday | Date of birth |
username | Username or account email for sign-in |
current-password | The existing password on a sign-in form |
new-password | A new password on a sign-up or change-password form |
one-time-code | A code sent by SMS or an authenticator app |
cc-name, cc-number, cc-exp, cc-csc | Payment card name, number, expiry and security code |
The full list is in the HTML specification. Use the exact spelling: organization with a "z" is the token, whatever your house style.
Sections and contact types
You can add qualifiers before the main token:
shippingorbillingto tell two addresses apart:autocomplete="shipping postal-code".section-followed by any name, to group fields that belong together, such as two different people on one form.home,workormobilebefore contact tokens:autocomplete="work email".
Turning autofill off
autocomplete="off" asks the browser not to save or fill the field. Use it sparingly, for values that are never about the user, such as a search filter or a one-off reference number. Browsers may ignore it on sign-in fields, because blocking password managers makes accounts less secure.
Do not use autocomplete="off" to stop people pasting or saving passwords. Password managers encourage long, unique passwords. Marking password fields with current-password and new-password helps them work properly.
A checkout form
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery details | Riverside Bakery</title>
</head>
<body>
<h1>Delivery details</h1>
<form action="/checkout" method="post">
<p>
<label for="full-name">Full name</label>
<input id="full-name" name="full-name" type="text" autocomplete="name" enterkeyhint="next" required>
</p>
<p>
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" enterkeyhint="next" required>
</p>
<p>
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" enterkeyhint="next">
</p>
<p>
<label for="address">Street address</label>
<textarea id="address" name="address" rows="3" autocomplete="shipping street-address" required></textarea>
</p>
<p>
<label for="town">Town or city</label>
<input id="town" name="town" type="text" autocomplete="shipping address-level2" enterkeyhint="next" required>
</p>
<p>
<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" type="text" autocomplete="shipping postal-code" autocapitalize="characters" enterkeyhint="done" required>
</p>
<button type="submit">Continue to payment</button>
</form>
</body>
</html>inputmode: choose the keyboard
type defines what the data is. inputmode only chooses which virtual keyboard to show on touch devices. It is useful when the right type does not exist or has side effects.
| Value | Keyboard |
|---|---|
text | Standard text keyboard (the default) |
numeric | Digits only |
decimal | Digits and a decimal separator |
tel | Telephone keypad |
email | Text keyboard with @ and . |
url | Text keyboard with / and . |
search | Text keyboard with a search-style Enter key |
none | No keyboard, for fields with their own custom input |
The classic use is numbers that are not quantities:
<label for="card">Card number</label>
<input id="card" name="card" type="text" inputmode="numeric" autocomplete="cc-number">
<label for="code">Verification code</label>
<input id="code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6">type="text" keeps leading zeros and spaces, avoids the spinner arrows of type="number", and inputmode="numeric" still shows the digit keypad. On many phones, one-time-code also lets the keyboard suggest the code from a text message.
Do not use inputmode when the right type exists. For an email field, type="email" already shows the email keyboard and adds validation.
If you validate digits with pattern="[0-9]*", pair it with inputmode="numeric". The pattern checks the value; the input mode only changes the keyboard.
enterkeyhint: label the Enter key
On virtual keyboards, the Enter key can show a word or icon that says what will happen:
| Value | Typical meaning |
|---|---|
enter | Insert a new line |
done | Finish and close the keyboard |
go | Go to the typed destination |
next | Move to the next field |
previous | Move to the previous field |
search | Run a search |
send | Send a message |
<label for="q">Search the menu</label>
<input id="q" name="q" type="search" enterkeyhint="search">enterkeyhint only changes the label. It does not move focus to the next field or submit the form; that behaviour is still up to the browser and any script you write. Make sure the hint matches what really happens, and treat it as a nice extra rather than something to rely on, since keyboards display it in different ways.
autocapitalize and spellcheck
Two more attributes help with specific fields:
autocapitalizecontrols automatic capitals on virtual keyboards:none,sentences,wordsorcharacters. Usecharactersfor postcodes andnonefor usernames.spellcheck="false"stops the red underline on fields such as usernames, codes and email addresses, where spelling suggestions are unhelpful.
Summary
- Add an exact
autocompletetoken to every field that collects details about the user. - Use
current-password,new-passwordandone-time-codeso password managers and code autofill work. - Use
typefor the kind of data andinputmodeonly to pick the keyboard, typicallynumericfor card numbers and codes. - Use
enterkeyhintto label the Enter key; it does not change behaviour. - Reserve
autocomplete="off"for fields that are never about the user.