Html input type="tel" vs inputmode="tel"

Question

Knowing both is used as a hint for mobile browsers, I couldn't find a real doc about the difference between using <input type="tel"> and <input inputmode="tel">. So

• what's the difference?
• which is better to use?
• why duplication if it's the same?

The MDN doc suggests using the type. But it's still unclear on the explaination.

Divulsion

Ive tested on inputtypes.com and inputmode=numeric doesn't show only number keypad on android chrome. So for me seems like type=number is better – Eastern

type='number' is a bad idea as phone numbers can consist of other characters too, and a number (100034) is an entirely different thing from a phone number (1-800-U-LUV-PIZZA). The keyboards offered for numbers vs phone numbers, by iOS / Android, are different too. – Embassy

Sorry but the topic isn't about the numbers but "tel" as in telephone.. – Divulsion

Answer 1

The difference is the purpose of the attribute.

inputmode defines what kind of input mode the user agent (browser / operating system) should present to the user. Basically what type of keyboard.

type is about what type of value is expected, to which the user agent may apply acceptance / validation patterns. That said, the user agent will probably assume a default input mode based on that too.

It's entirely possible, for example, that you don't trust the default input mode or accepted input pattern that is supplied by the user agent. In such a case, type='text' is the safest input type, while the inputmode is still at your discretion, which you could set to tel in this case.

Embassy

Answer 2

input type vs attribute inputmode

(I know W3Schools is not the best place to learn things & sometimes not very accurate, but it has some explanation with screenshots attached)

type determines functionality of input, and tells the browser how to should render it. Like <input type="checkbox"> will make it look like a box, with ticked & unticked options available on click, while <input type="file"> shows a button which onclick allows you to select a file from your device.

inputmode softly changes the virtual keyboard on mobile/tablet (if available), but doesn't restrict user from typing or pasting anything.

---

Let's talk about number as example:

<input type="number"> allows only numbers to be entered, and you can even set min="1" max="5" attributes for further restriction, and mobiles will show numeric keyboard.

<input inputmode="numeric"> shows numeric keyboard on mobile, but you're actually allowed to type anything in this field.

---

How useful & which one to pick?

Let's say you want an input field for credit card, you want user to type only numbers, but visually through JS, while user is typing, you will change value to have spaces, to make it like "#### #### #### ####". So what to choose? You set it as <input type="text" inputmode="numeric">, because:

• type="text" will allow JS to set spaces in the value
• inputmode="numeric" changes mobile keyboard to numeric

Ridotto

Answer 3

If you want only show the "phone keys" like 0 to 9 and * and #, use

<input inputmode="tel">

If you want to show a form field with regular keyboard, use

<input type="tel">

Also see "Everything You Ever Wanted to Know About inputmode".

Skyjack

On iOS, they appear the same keypad, no regular keyboard – Divulsion

OK, Apple, grwl ... have a look at iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes and Managing the Keyboard // Apple DEV – Skyjack

I did. Nothing useful that could lead to conclusion – Divulsion