# 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 October 31, 2026

## 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:

```html
<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` |

```html
<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-password` on a sign-up form: it offers to make a long, random password and save it.
- `current-password` on a login form: it fills in the password it saved.
- `one-time-code` on the box for a code the site texts you: phones offer the code from the message, so nobody copies six digits by hand.

```html
<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:

```html
<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:

```html
<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.

![A phone showing the Peak Fitness form twice: on the left, a full letter keyboard under the ZIP code box; on the right, with inputmode="numeric", a large number pad](https://www.ask-codey.com/lessons/TODO)

## 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.

## Key terms

- [autocomplete](https://www.ask-codey.com/glossary/autocomplete)
- [inputmode](https://www.ask-codey.com/glossary/inputmode)
- [enterkeyhint](https://www.ask-codey.com/glossary/enterkeyhint)

## Cheat sheets

- [Autocomplete and Phone Keyboards](https://www.ask-codey.com/cheat-sheets/html-forms-autocomplete-and-input-modes-cheat-sheet)

## Related

- [Input Types for Email, Numbers, Dates and More](https://www.ask-codey.com/lessons/html-forms-input-types)
- [Hints and Error Messages Everyone Can Use](https://www.ask-codey.com/lessons/html-forms-hints-and-error-messages)

Source: https://www.ask-codey.com/lessons/html-forms-autocomplete-and-input-modes