HTML5 Input Types for Mobile.
Wall Script
Wall Script
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
web notification

24 comments:

  1. 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"

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

    ReplyDelete
  3. 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.

    ReplyDelete
  4. Useful in this mobile web age>>> Thanks!

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

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

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

    ReplyDelete
  8. Thank you for documenting this! Definitely useful.

    ReplyDelete
  9. Love u :) It'S Simple and Smart Example

    ReplyDelete
  10. i just know the input types. thanks for the info

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

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

    ReplyDelete
  13. Are these compatible with android devices also?

    ReplyDelete
  14. Thanks, Very Informative tutorial! 100 Likesss for making it easier to understand by writing this post! Gud Luck

    ReplyDelete

mailxengine Youtueb channel
Make in India
X