HTML5 Input Type Keyboards on iPhone & Android Devices

web

If you are building mobile web applications using things like PhoneGap, or jQuery Mobile you will want to take a look at some of the new values for the type attribute in the input tag that are offered by HTML5.

While these tags don't offer much benefit yet in desktop browsers, they do offer a huge benefit in mobile browsers. The different input types can be used to call up different default keyboard layouts on mobile devices such as the iPhone and Android based devices.

input type = email

When you specify type="email" in your input tag, the iPhone displays a keyboard with a small space bar, and includes a @ key.

Here's the code:

<input type="email" name="e" />

Here's a screenshot on iPhone OS 4:

iPhone Screenshot of HTML5 input type email

Note that Android 2.2 displays the default keyboard in this case.

input type = number

When you want to provide a number input, you can use the HTML5 input type="number" attribute value.

<input type="number" name="n" />

Here is the keyboard that comes up on iPhone 4:

iPhone Screenshot of HTML5 input type number

Android 2.2 uses this keyboard for type=number:

Android Screenshot of HTML5 input type number

input type = tel

For phone numbers you can use the input type="tel" attribute value.

<input type="tel" name="t" />

Here is the keyboard that iPhone displays for this type:

iPhone Screenshot of HTML5 input type tel

Android displays the same keyboard for type = number as it does for type = tel

input type = url

Finally if you want to have the user enter a url you can specify the input type="url" as follows:

<input type="url" name="u" />

The iPhone removes the space bar, and adds the .com and forward slash keys:

iPhone Screenshot of HTML5 input type url

Android displays the default text input keyboard for type=url in version 2.2.

Start using these types now

You can start using these types now to provide a better user experience your mobile visitors. Browsers that do not support HTML5 will treat any unrecognized input type as if it were type="text". In fact if you fetch the type attribute from JavaScript on such an element it will return a value of "text".

Try these examples on your mobile device

Here's a link to try these HTML5 form input types for yourself. Please feel free to post in the comments what keyboard your mobile device uses for them. That example page is using jQuery Mobile for layout.



Related Entries

2 people found this page useful, what do you think?

Trackbacks

Trackback Address: 768/9A8D7CBAFB1C05E7237E30334C7D6FDF

Comments

On 11/15/2010 at 6:57:35 PM UTC Brian H. wrote:
1
Cool stuff Pete. Thanks for bringing this to our attention.

By the way, checking "Check Spelling" on your blog produces a popup saying "An error has occurred".

-Brian

On 12/06/2010 at 9:49:33 PM UTC bama belles wrote:
2
The course of true love never did run smooth

On 12/08/2010 at 12:35:23 PM UTC insurance waiver forms wrote:
3
Arnulfo is the greatest!

-Kindest regards Edna

On 01/26/2011 at 3:08:21 PM UTC zoowskaps wrote:
4
Just like we did when retouching the portraits, click on the Create a New Layer icon at the bottom of the Layers panel to create a new blank layer to hold our retouching work.

On 03/14/2011 at 5:56:17 PM UTC Femswomswiz wrote:
5
I have a question - can I post this topic?

On 05/02/2011 at 10:31:55 AM UTC south jersey police auctions wrote:
6
Great Post. I add this Blog to my bookmarks.

On 07/20/2012 at 5:28:32 AM UTC vignesh wrote:
7
how we can able to restrict the characters in input type = "password"

is there any way to handle it

On 10/24/2012 at 2:43:22 AM UTC Liberal Cabrera Raya wrote:
8
GREAT publish and impressive in turn …will bear a try all the tips..Thanks……

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?