UXcellence Exploring excellent user experience

Quick Fix: Use New HTML5 Input Types to Simplify Forms

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 .com
  • tel: telephone keypad with large numbers
  • number: number keyboard with other punctuation

Each new input type (email, url, tel, and number) shows a different keyboard on most mobile platforms.

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?

Like this? Please share:

Explore more like this