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.

Download Script
Live DemoPrevious 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"/>

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

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

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

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

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









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"
THANKS :)
Required Validation Included ?
Hey Srinivas, this was really awesome tut man..!
Is it working for all mobile browsers or for limited one eh ?
Very nice tutorial!!
Nice, but what about Android?
Useful post :)
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.
Useful in this mobile web age>>> Thanks!
Nice tutorial!
i have to thank you to benefit me with such a good yutorial
Its really amazing. i liked your post.
I really enjoy reading your post! Thanks for sharing with us! Delightful!
This is a wonderful tutorial! Thanks for making it easier to understand by writing this post!
good tutorial for me.
Thank you for documenting this! Definitely useful.
Love u :) It'S Simple and Smart Example
great tutorial bro.. :)
i just know the input types. thanks for the info
Excellent & well explained Post ! i m so impressed with this useful tutorials . Good work keep it up
Thanks for the tutorial. It was very easy to follow.