HTML5 Input Types for Mobile.
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

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. Required Validation Included ?

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

    ReplyDelete
  4. 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
  5. Useful in this mobile web age>>> Thanks!

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

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

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

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

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

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

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

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

    ReplyDelete
  14. Are these compatible with android devices also?

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

    ReplyDelete