HTML 5 Input Types

This article will show you how to use HTML 5 input types to enhance user experience.

Published on:October 17, 2015


The invention of the modern smartphone has been a game changer for most developers. We now have to juggle multiple platforms, input types, and more. Luckily a number of new tools have come into play to help us out. One of these are new HTML 5 input types. These types and a description of how they help the user are listed below.

Input Type How It Helps
email iPhone/Android: Adds the @ symbol as well as the period ( . ) to the keyboard. This makes it easier to type email addresses.
url iPhone: Adds .com, the period (.), and the forward slash ( / ) to the on screen keyboard. Does nothing on Android.
tel iPhone/Android: Converts the on screen keyboard to a telephone style keypad. Useful for inputing telephone numbers.
number iPhone/Android: Converts the on screen keyboard to a format optimized to enter numeric data.
date, week, month, time, datetime, datetime-local iPhone/Android: Various date and time type inputs. Note that some of these do not work on older versions of android.
Range iPhone/Android: Shows a numeric range slider.

Browser Compatibility

Browsers that don't support these input types fall back to regular text input, so you can safely use it without worrying about site breakages. That's it! Thanks for reading!