Overview of HTML5 input types

Phones and tablets do not have the benefit most desktops and laptops do, which is a large input device called the "keyboard". Virtual keyboards offered by mobile devices are physically smaller and usually more tedious to operate, but the great news is that HTML5 has already standardized a handful of input types which make them easier to use.

Taking advantage of the various HTML5 input types is extremely beneficial to the overall user experience of your app. It’s a small detail web app developers should be aware of, and with just minimal effort it makes a massive positive impact on the way your user interacts with forms. For example, if the user needs to enter a telephone number into your app, then their virtual keyboard should show a telephone keypad instead of keyboard with characters they'll never need to enter.

Not every input's expected data type is the same, and as such, it’s important to know which input to use and when. We’ve listed all the currently supported input types (links on the left) to help you when designing great app experiences.

Note: The virtual keyboard examples to the right are only images, and not actual working keyboards.

Text

First up is the Text Input, the most common input type used. The code is pretty standard, and if you’re used to web development this input isn’t anything new. This is also the fallback if a device does not support a certain HTML input type.

<label class="item item-input">
  <span class="input-label">Username</span>
  <input type="text">
</label>
Text Input

Email

The Email Input should be used anytime you require a user to enter an email address. It’s important to take advantage of this input type because it offers a much smoother keyboard experience, displaying the @ and . characters within the initial keypad for quicker typing.

<label class="item item-input">
  <span class="input-label">Email</span>
  <input type="email">
</label>
Email Input

Tel

The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!

<label class="item item-input">
  <span class="input-label">Telephone</span>
  <input type="tel">
</label>
Telephone Input

Number

The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.

<label class="item item-input">
  <span class="input-label">Number</span>
  <input type="number">
</label>
Number Input

Date

The Date Input should be utilized for when a user is asked to enter the month, day, and year. The mobile keyboard will offer a nice interactive panel for easy entering.

<label class="item item-input">
  <span class="input-label">Date</span>
  <input type="date">
</label>
Date Input

Month

The Month Input will trigger a keyboard experience similar to the date input, however it leaves out the “day” option. Use this input when your user only needs to enter the month and year. A perfect example would be for taking credit card expiration dates.

<label class="item item-input">
  <span class="input-label">Month</span>
  <input type="month">
</label>
Month Input

Password

The Password Input is another commonly used input in normal web development. It hides the characters so nobody else can see what the user is typing.

Also note that it's being to be common practice to give users the option to show actual characters with the text input instead of hidden password characters. It’s up to you to decide if/when it’s applicable to use.

<label class="item item-input">
  <span class="input-label">Password</span>
  <input type="password">
</label>
Password Input