Show Better Mobile Keyboards With HTML inputmode

Asking for a number and then showing a full text keyboard is a small irritation, repeated for every person who fills in the form on a phone. HTML already has an attribute for this.

If a field asks for a number but the browser opens a normal text keyboard, the user has to switch keyboard modes before typing.

HTML has a simple attribute that can help: inputmode.

It tells the browser what kind of keyboard would be useful for the expected input. It has been widely supported in modern browsers for years.

Ask for the keyboard that fits the value

<input
  type="text"
  inputmode="numeric"
>

On a phone, this asks the browser to show a keyboard aimed at entering numbers.

That is useful for:

Why not type="number"?

Because not every value made from digits is actually a number.

A PIN like:

0042

is not something you want the browser to turn into the number 42.

A phone number is not a number you calculate with either.

For values that are really text but happen to use digits, this is often better:

<input
  type="text"
  inputmode="numeric"
>

inputmode does not validate

This is important:

<input inputmode="numeric">

does not force the user to enter only numbers.

inputmode is a keyboard hint.

If validation matters, use the correct input type, a pattern, or server-side validation too.

Common values

The main values are:

none
text
decimal
numeric
tel
search
email
url

numeric

<input
  type="text"
  inputmode="numeric"
>

A useful real example:

<label for="code">
  Verification code
</label>

<input
  id="code"
  name="code"
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
>

decimal

Use this when decimal input is expected:

<input
  type="text"
  inputmode="decimal"
>

The exact keyboard depends on the device and language.

tel

For phone numbers:

<input
  type="tel"
  autocomplete="tel"
>

type="tel" already gives the browser a useful hint, so adding inputmode="tel" is often unnecessary.

email

<input
  type="email"
  autocomplete="email"
>

On mobile, the keyboard may make the @ character easier to reach.

url

<input
  type="url"
  autocomplete="url"
>

The keyboard may show characters that are useful for URLs.

<input
  type="search"
  inputmode="search"
>

The return key may be labelled “Search” instead of using a normal return icon.

Combine it with autocomplete

A good mobile form often uses both:

<input
  type="email"
  name="email"
  autocomplete="email"
>

<input
  type="tel"
  name="phone"
  autocomplete="tel"
>

<input
  type="text"
  name="code"
  inputmode="numeric"
  autocomplete="one-time-code"
>

The keyboard becomes more useful, and the browser gets a better chance to fill known data.

Do not block paste

For codes, a simple field is often better than six tiny boxes:

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6"
>

Users can paste into it, and mobile operating systems may offer the code automatically.

Test on a real phone

Desktop browsers do not show the main benefit of inputmode.

Test the form on a real iPhone and Android device if mobile form use matters to your site.

The exact keyboard can differ between platforms.

A small attribute with a real benefit

inputmode will not transform a website, but it can remove one annoying step from filling out a form on a phone.

This is exactly the sort of form improvement I like: one honest hint to the browser, no JavaScript, and one less awkward step for the user.