9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, January 14, 2013

HTML5 Input Types for Mobile.

If you are working with mobile web applications, then you must adapt new HTML5 components. This post explains you how to implement new HTML5 input types while creating forms in mobile web projects. Take a look at these screen shots of the new input types in browsers that support in iPhone. and iPad.

Responsive Web Design using CSS3


Download Script
     Live Demo

Previous Tutorials: Website Design for Mobile Devices and Responsive Web Design and Modernizr implementation for HTML5

type='text'
Usual input type text that display a alphabetical keyboard
<input type="text" name="username" placeholder="Username"/>

HTML5 Mobile Input types
iOS display an @ sign on the keypad

type='url'
iOS shows .com and /, removing the space key
<input type="url" name="url" placeholder="Website URL"/>

HTML5 Mobile Input types

type='email'
iOS display an @ sign on the keypad
<input type="email" name="email" placeholder="Email"/>

HTML5 Mobile Input types

type='tel'
Smartphone display a numeric keyboard
<input type="tel" name="tel" placeholder="Telephone"/>

HTML5 Mobile Input types

type='date'
Smartphone display a numeric keyboard
<input type="date" name="date" placeholder="Date"/>

HTML5 Mobile Input types

type='number'
iOS display a numeric keyboard with special characters
<input type="number" name="number" placeholder="Numbers"/>

HTML5 Mobile Input types
Comments
{ 23 comments }
Gaurav J said...

You can also add regular expression patterns to allow only number. Using pattern="\d*" will only display number in the keypad.

input type="text" pattern="\d*" id="session_id" placeholder="Enter a number"

BlueHeart said...

THANKS :)

Keshav said...

Required Validation Included ?

suumit shah said...

Hey Srinivas, this was really awesome tut man..!
Is it working for all mobile browsers or for limited one eh ?

Alexander said...

Very nice tutorial!!

Attila Horvát said...

Nice, but what about Android?

Karthikh Venkat said...

Useful post :)

Vijesh C said...

If we are typing incorrect web address and mail Id it is highlighted to red, looks nice. Similarly when we type letters instead of numbers in fields where we should type only numbers then also it should be highlighted in red.

Grant Mbedzi said...

Useful in this mobile web age>>> Thanks!

Alexander said...

Nice tutorial!

yaso said...

i have to thank you to benefit me with such a good yutorial

Joomla Web Hosting Business said...

Its really amazing. i liked your post.

Nancy said...

I really enjoy reading your post! Thanks for sharing with us! Delightful!

Carmen said...

This is a wonderful tutorial! Thanks for making it easier to understand by writing this post!

iglobewebsolutions said...

good tutorial for me.

Cubicle Ninjas said...

Thank you for documenting this! Definitely useful.

hima javvadhi said...

Love u :) It'S Simple and Smart Example

Zeshan Ahmed said...

great tutorial bro.. :)

cinta2maret said...

i just know the input types. thanks for the info

Mahender said...

Excellent & well explained Post ! i m so impressed with this useful tutorials . Good work keep it up

Nancy said...

Thanks for the tutorial. It was very easy to follow.

Anonymous said...

Very Nice !!!

Sean Pearse Fullerton said...

Are these compatible with android devices also?

Post a Comment