mobile input types

Virtual keyboards are awesome. Use them.

One of the easiest, cheapest, fastest and most effective ways of improving your mobile experience is using the right input type. It will save the user dozens of annoying taps and all you need to do is strike a few keys.

It's not going to transform a terrible mobile experience but it could make the difference between a good and awesome one. There are dozens of input types, have a scroll down to discover when you should and shouldn't be using them.

Text

The most common input type, everyone uses it everywhere. But just consider, is the user actually inputting text? If they are great, but if they're not, try to find an input type that better suits whatever they're inputting.

<input type="text">

Email

Entering an email on the standard keyboard is a pain in the butt. This awesome keyboard adds the @ sign as well as the .com and other handy buttons to just make entering an email address as easy as possible.

<input type="email">

Tel

If ever there were a most underused input type this would be it. Tel offers the user a numeric keypad. If all you want from the user is a number you should be using the tel input type. Forget using number, because that actually includes a bunch of stuff which isn't numbers.

<input type="tel">

Number

This one is incredibly deceitful and as a result is often way overused. Often you'll find Tel is the superior option. Number is not the best method to get users inputting numbers. In-fact its use case is inputting numbers and symbols. A very niche user case, you really shouldn't be using number very often.

<input type="number">

Password

You're thinking "well I should use this when they're inputting passwords". When was the last time you were entering a password on your mobile and someone was stood looking over your shoulder? The fact is hiding the characters is just annoying because users can't see what they've typed. So unless they're logging into the MI6 missile control system you probably don't need to disguise the characters.

<input type="password">

Date

We've all seen those horrid little calendars replicated on mobile devices, or even people making users insert dates to a text field with stupidly strict validation rules. Don't do it, set the input type to date and the mobile browser will take care of everything for you.

<input type="date">

Date & Time

Traditionally inputing a date and time was a massive faff. Set the input type to datetime and just watch those drop-out rates fall through the floor. Remember users have to scroll through day by day. So if you require a date a few months in advance it's better to do date and time separately.

<input type="datetime">

Month

A predefined list which is defaulted to the current month. This is far easier than having users type a month or pick from a group of radio buttons.

<input type="month">

Search

A handy keyboard which slightly twists the text input so the 'go' button now reads 'search'. It's the little things that count.

<input type="search">

Next time you're building a mobile product,
take a moment to consider the input type.

Built by @imJackH on a broken down train. Tweet