People will do the least amount of work possible to get a task done. In other words users are lazy, and mobile users not only lazy but often in a hurry. So make sure an app provides the features that people really need at the moment. Giving people more than they need just clutters up the experience.

Email Address Fields

<input type="email">

Most developers make a mistake of setting the input type of every form field to “text”. This is a problem because the input of every form field is not always just a plain text. Most forms usually have fields that ask for information with numeric or alphanumeric characters. When users try to fill out these fields, they should see a numeric or alphanumeric keyboard. Don’t force users to switch between keyboards by themselves. Do this job for them and they’ll be thankful to you.

It’s hard to find a form without email field nowadays. So it make sense to show email-related symbols on the keyboard from start, such as “@”, “.” and alphanumeric characters. You can achieve it by specifying “email” type to the html input. Unfortunately there is no space for numeric symbols on the screen (at least on iPhone/iPod), but most of the characters in usual email are letters. I’d like to have “.com” on this keyboard as well. Even more, usually users have their email addresses in mobile mail client, so why don’t let users to choose from this list?

Web Address Fields

<input type="url">

To make things easier, there’s also a keyboard that’s optimized for typing in web addresses. When you set the input type of a web address field to “url”, it’ll give users a keyboard that displays a “.”, “/”, and “.com” key. You can even long-press the “.com” key to choose other common suffixes like “.org” or “.net”. This keyboard can also prevent typing errors. It removes the “space” key so that users won’t accidentally add spaces in the web address field.

Number Fields

<input type="number">

It’s important to give users a numeric keyboard when they’re filling out number fields.

I can understand such keys as “,” or “.” or event “(“ and “)” but what “@” or “!” are doing there? Why don’t make numbers bigger by removing redundant keys?

Telephone Fields

<input type="tel">

Moving forward to make it easy for users to type in their telephone numbers. Setting the input type to “tel” gives users a telephone keypad to type with. This keypad mimics the user interface users are familiar with when they make phone calls.

The only change I’d love to have here is “My Phone Number”.

Conclusion

User input is more critical on mobile device than on desktop because there is no direct access to all keys user might want to use. Therefore it make sense to use different keyboards for different input types. These input types were introduced with HTML5. Not all browsers support the full capabilities of HTML5 yet, but all of them do support these input types when users submit their data. If you want to improve the usability of your mobile forms in a big way, update your fields with the right input types to give your users the right keyboard to type with.

Related articles

A Form of Madness

Mobile ready form inputs

The new input types