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:
email: QWERTY keyboard with @ and period (.)url: QWERTY keyboard with period (.), forward slash (/), and .comtel: telephone keypad with large numbersnumber: number keyboard with other punctuation
When to use number vs. tel
When you want number input, there are two options: tel or 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 min, max, and 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.
Want to learn more about new HTML5 form inputs and attributes?