Text input type


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 input type


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 input type


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 input type


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 input type


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 input type


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 and Time input type

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 input type


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">