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

---

Published on:October 17, 2015

---

Introduction

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!