HTML5: Input Types / Mobile Keypad

July 19, 2013 3:22 pm Published by Leave your thoughts

Have you ever noticed that when you’re on your phone browsing the internet or messing around with some apps that you get different types of keypads? Below are some examples and screenshot of the new input types or “mobile keypads” as i like to call them, for phones at least.

View Mobile Keypad Demo
p.s. if you want to see it in action, visit on your phone.
the address is case sensitive, mind the “T” on types.

Number keypad + symbols

<input type="tel"/> - 


Date picker

<input type="date"/> - 


Email keypad (@ / .com)

<input type="email"/> - 


Below are the rest of the new input type for HTML5.

color:<input type="color"/> - 
datetime:<input type="datetime"/> - 
datetime-local:<input type="datetime-local"/> - 
month:<input type="month"/> - 
number:<input type="number"/> - 
range:<input type="range"/> - 
search:<input type="search"/> - 
url:<input type="url"/> - 
week:<input type="week"/> - 
Tags: , , , , , , , , , ,

Categorised in:

This post was written by admin

Leave a Reply

Your email address will not be published. Required fields are marked *