Touch Keyboard Types

HTML5 code and demos for invoking different touch keyboards depending on input type

During our recent usability study of mobile commerce sites we observed several usability issues on sites that did not fully optimize their form fields for touch keyboards.

We therefore decided to provide web designers and developers with the following "Cheat Sheet", showing how to set the appropriate type and when to use autocorrect="off", autocapitalize="off" and novalidate. You can demo the fields yourself by visiting this page on a touch device.

If you want the detailed usability test observations we've published them in a Smashing Magazine article. Making these changes will greatly improve the form filling experience for your mobile and tablet users, and they couldn't be easier to implement.

Code & Demos

Updated August 13, 2013

E-mail field

Disable auto-correct and disable auto-capitalization. Invoke special @ keyboard.

<input type="email" autocapitalize="off" autocorrect="off">

Phone field

Invoke special phone keyboard. (Note: iOS doesn't allow input of special characters such as parenthesis and dash with the phone keyboard. Thus, never require phone numbers to be formatted with such characters.)

<input type="tel">

Address line field

Disable auto-correct.

<input type="text" autocorrect="off">

ZIP code field

Set input pattern to numeric input. (Note: Argentina, Canada, Netherlands, and UK, may use letters in their postal code. To support these, dynamically change the input pattern depending on selected country.)

<input type="text" pattern="\d*" novalidate>

Credit card number field

Numeric keyboard.

<input type="text" pattern="\d*" novalidate autocorrect="off">

Quantity field

Semantic numeric keyboard.

<input type="number">

Date field

Date picker keyboard. (Note: You may want to implement an actual calendar date picker; see suggestion #7 in this Smashing Magazine article on m-commerce design.)

<input type="date">

Submit button

For the 'Go' button on keyboard to work, avoid using type=button. (Thanks to Todd Gilbert for the tip.)

<input type="submit">

Touch Keyboard Benchmark

We've also benchmarked the top 50 mobile commerce sites across the 5 touch keyboard guidelines described in the Smashing Magazine article, the results are as follows: (Show detailed breakdown)

#1: Disable auto-correct where the dictionary is weak

Is 'Address Line' auto-correct disabled?

8% adhere · 92% violate

#2: Show appropriate keyboard layout

Does email field have email keyboard, phone keyboard, and card numeric field?

40% adhere · 60% violate

#3: Consistently invoke keyboard layouts

Are both phone, credit card number, date and CVV code numeric?

46% adhere · 54% violate

#4: Honor the 'Next' and 'Previous' button behavior

Tab through form: is sequence right, is data persisted?

96% adhere · 4% violate

#5: Disable auto-capitalization where appropriate

Is auto-capticalization disabled on the email field?

62% adhere · 38% violate

Site #1 #2 #3 #4 #5
Amazon Violated Violated Violated Adhered Adhered
Staples Violated Violated Adhered Adhered Violated
Dell Violated Violated Violated Adhered Violated
Office Depot Violated Adhered Violated Adhered Adhered
Walmart Adhered Adhered Adhered Adhered Adhered
Sears Violated Violated Violated Adhered Adhered
OfficeMax Violated Adhered Violated Adhered Adhered
Best Buy Violated Violated Adhered Adhered Violated
Newegg Violated Violated Violated Adhered Violated
Costco Violated Violated Violated Adhered Violated
Macy's Violated Adhered Violated Adhered Adhered
Victoria's Secret Violated Violated Violated Adhered Adhered
HP Violated Violated Violated Adhered Adhered
JC Penny Violated Adhered Adhered Adhered Adhered
LL Bean Violated Adhered Adhered Adhered Violated
Target Violated Adhered Adhered Adhered Adhered
GAP Violated Violated Violated Adhered Adhered
Williams Sonoma Violated Adhered Adhered Adhered Adhered
Overstock Violated Violated Violated Adhered Adhered
Amway Violated Violated Violated Adhered Violated
Toys'R'Us Violated Violated Adhered Adhered Adhered
Kohl's Violated Violated Violated Adhered Violated
Rakuten Violated Violated Violated Adhered Violated
Nordstrom Violated Violated Violated Adhered Adhered
Nieman Marcus Violated Adhered Adhered Adhered Adhered
Cabela's Violated Violated Violated Adhered Violated
Barnes and Noble Adhered Violated Violated Adhered Adhered
Home Depot Violated Violated Adhered Adhered Violated
Musician's Friend Violated Violated Violated Adhered Adhered
1-800 Flowers Adhered Adhered Adhered Adhered Violated
Drugstore.com Violated Violated Violated Adhered Violated
Gilt Violated Adhered Adhered Adhered Violated
J. Crew Violated Adhered Adhered Adhered Adhered
Foot Locker Violated Adhered Adhered Adhered Adhered
Crate and Barrel Violated Adhered Adhered Adhered Adhered
American Eagle Outfitters Violated Adhered Adhered Adhered Adhered
Blue Nile Violated Violated Violated Adhered Adhered
REI Violated Adhered Adhered Adhered Adhered
Yoox Violated Violated Violated Adhered Violated
Microsoft Violated Violated Violated Adhered Adhered
Ralph Lauren Violated Violated Violated Adhered Violated
FTD Violated Adhered Adhered Adhered Adhered
Diapers.com Violated Adhered Adhered Adhered Adhered
Walgreen Violated Violated Violated Adhered Violated
DisneyStore Violated Violated Adhered Violated Violated
Hayneedle Violated Adhered Adhered Adhered Adhered
Nike Adhered Violated Violated Violated Adhered
Build.com Violated Violated Violated Adhered Adhered
CVS Violated Violated Adhered Adhered Violated
Eddie Bauer Violated Adhered Adhered Adhered Adhered
Close overlay