HTML5: Input Types / Mobile Keypad

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 http://janpatricklara.com/web/extra/inputTypes.html on your phone.
the address is case sensitive, mind the “T” on types.

Scan to View Mobile Keypad Demo

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

Categorised in: html5

This post was written by admin