Skip to main content
Nick Marsceau

HTML inputmode Attribute

I've been writing HTML for almost 15 years at this point, and I'm still discovering language features I've never used before that have almost full browser support and Just Work™. This week, I learned about the inputmode attribute. It hints to devices with onscreen keyboards that they should use a different keyboard mode for an input.

I always knew that mobile devices would display a number keyboard for <input type="number">, and I vaguely knew that there was a way to specify different keyboard types for text inputs, but I had never seen this attribute before. There are values for phone numbers, email addresses, URLs, and more. This attribute does not affect the input's validation at all, it just tells the device that it would be useful to use a specialized keyboard layout when the user is typing in this input.

The documentation on MDN covers all the different options, and this article on CSS Tricks goes into more depth on how the main mobile browsers handle each of the input modes. It also includes a demo of each of them at the end.