HTML5 Input Types for Mobile web application.

Are you working with mobile web applications, then you must adapt new HTML5 components. Here I 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.

type='text'

Usual input type text that display a alphabetical keyboard

<input type="text" name="username" placeholder="Username"/>

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