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.

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.