Unless you’ve filled out lots of forms on the web, you may not have noticed that different input field types can actually trigger different keyboard layouts. For instance, specifying
type="email" brings up a keyboard that includes the @ and . characters. Different types can bring up different keyboards:
url: QWERTY keyboard with period (.), forward slash (/), and .com
tel: telephone keypad with large numbers
number: number keyboard with other punctuation
When to use
When you want number input, there are two options:
number. While it may seem logical to use
number in most cases, if you only want numbers in a field, using
tel will provide a simpler, number-only phone keypad. The
number input type also allows the user to select letters and punctuation if they choose.
Another thing to keep in mind when using
number: in more recent desktop browsers,
number typically has a spinbox UI (which allows users to click up or down arrows to increment or decrement the field). It also includes allows for extra attributes like
step. These attributes along with the spinbox UI are not yet widely implemented in mobile browsers.
These new types degrade gracefully
The best part about using these HTML5 input types is that they degrade gracefully in older browsers that don’t support them. If a browser doesn’t understand the new input types, it automatically treats it as
type="text" - which in nearly every case will work just fine.