menu

Monday, 14 January 2013

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