Autocomplete and Phone Keyboards
The autocomplete, inputmode and enterkeyhint attributes let a browser fill in what it already knows and give a phone the right keyboard, so a form takes seconds instead of minutes.
Journeyman · HTML · Web Development · Updated
After this lesson you can
- Choose the autocomplete value that tells the browser what a field asks for
- Choose the inputmode and enterkeyhint that bring up the right keyboard on a phone
Key takeaways
- autocomplete names what a field asks for, such as name, email, tel or postal-code, so the browser can offer what it has saved.
- Use new-password on a sign-up form and current-password on a login form, so a password manager can make or fill the password.
- autocomplete="off" is rarely right. People expect autofill, and many browsers ignore off on login fields.
- inputmode picks the phone keyboard. A ZIP code is type="text" with inputmode="numeric", because it isn't a number you do math with.
- enterkeyhint sets the label on the phone keyboard's Enter key, such as next, search or send.
Picture signing up for a gym on your phone, standing in the lobby, with one thumb. If the form fills in your name, email and phone with one tap and shows a number pad for your ZIP code, you're done in seconds. If you have to type everything on a tiny keyboard and switch to numbers by hand, you may put the phone away and "do it later". Three attributes make the difference, and every form you build for a phone-first world needs them.
The browser remembers for you
A barista who knows your usual order saves you from saying it every morning. Browsers do the same: they save your name, email, phone and addresses, and offer them when a form asks. That's called autofill. But the browser has to know what each field asks for, and a box named field3 could be anything.
The autocomplete attribute tells it. Its value is a word from a fixed list in the HTML standard:
<label for="full-name">Full name</label>
<input type="text" id="full-name" name="fullName" autocomplete="name">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Click into the name box, and the browser offers the name it has saved. Pick it, and some browsers fill the email and phone in the same tap.
The values you'll use most
The value must be a word from the list. A word you make up, such as autocomplete="zip", is ignored, and the validator flags it.
| The field asks for | autocomplete value |
|---|---|
| A whole name | name (or given-name and family-name for two boxes) |
| An email address | email |
| A phone number | tel |
| The street part of an address | street-address |
| A ZIP or postal code | postal-code |
| A birth date | bday |
| A new password (sign-up, change password) | new-password |
| The password you already have (login) | current-password |
| The code a site texted or emailed you | one-time-code |
<label for="zip">ZIP code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code">
<label for="birth-date">Birth date</label>
<input type="date" id="birth-date" name="birthDate" autocomplete="bday">
Passwords and one-time codes
A password manager, built into the browser or added to it, saves passwords for you. autocomplete tells it what to do with a password box:
new-passwordon a sign-up form: it offers to make a long, random password and save it.current-passwordon a login form: it fills in the password it saved.one-time-codeon the box for a code the site texts you: phones offer the code from the message, so nobody copies six digits by hand.
<label for="password">Choose a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" minlength="8" required>
Why autocomplete="off" is rarely right
autocomplete="off" asks the browser not to fill a field in. People reach for it to "keep things safe", and it mostly makes forms slower: people expect autofill, and many browsers ignore off on login fields anyway, so password managers keep working.
It does fit a box where yesterday's answer is always wrong, such as the answer to a puzzle, or the code on a gift card someone is checking. For a name, an email or a password, give the real value instead.
The right keyboard on a phone
A phone shows a different keyboard for each kind of answer: letters, a number pad, a keyboard with an @ key. type="email" and type="tel" already bring up the right one. When the type doesn't, inputmode asks for a keyboard without changing anything else about the field.
A ZIP code is the classic case. It's made of digits, but it isn't a number you'd add up, so type="number" is the wrong type: it adds arrows that count up and down, the mouse wheel can change it while someone scrolls the page, and it accepts the letter e (as in 3e5, a way to write 300000). Keep it text, and ask for the number pad:
<label for="zip">ZIP code</label>
<input type="text" id="zip" name="zip" inputmode="numeric" autocomplete="postal-code" pattern="[0-9]{5}">
The inputmode values you'll use most are numeric (digits only: ZIP codes, membership numbers, PIN codes), decimal (digits and a decimal point: a price or a tip), tel, email, url and search.
The Enter key's label: enterkeyhint
On a phone keyboard, the Enter key can say different things: next, search, send, go, done. enterkeyhint chooses the label:
<label for="class-search">Find a class</label>
<input type="search" id="class-search" name="q" enterkeyhint="search">
Its values are enter, done, go, next, previous, search and send. It changes only the label: what the key does is still up to the browser and the page. A search box that says search and a chat box that says send tell people what's about to happen.
Try it. Add autocomplete values to a form of yours, open it with Live Server, and click into the name box: the browser offers what it has saved. If you've put a page online with GitHub Pages (Put Your Site Online for Free shows how), open it on your phone and tap the ZIP code box to see the number pad.
Check yourself
2 questions to try on the lesson page.
So what
Every field you label for the browser is one less thing someone has to type with their thumb. On a phone, that's the difference between a form people finish and one they leave for later.