Touch Keyboard Types

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

During our recent large-scale usability study of mobile 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 and how to use inputmode, pattern, autocorrect, autocapitalize, novalidate and autocomplete attributes. 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 this 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 September 9, 2019

E-mail field

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

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

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" inputmode="tel" autocorrect="off" autocomplete="tel">

Name field

Disable auto-correct. (Note: while it is recommended to use a single name field, if you split it across multiple fields, be sure to assign the appropriate autocomplete values.)

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

Address line fields

Disable auto-correct. (Note: be sure to update the autocomplete attribute accordingly if using multiple address line fields.)

<input type="text" autocorrect="off" autocomplete="address-line1">

City

Disable auto-correct.

<input type="text" autocorrect="off" autocomplete="address-level2">

State

Disable auto-correct.

<input type="text" autocorrect="off" autocomplete="address-level1">

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 type, inputmode and pattern, attributes depending on selected country. Also, for the numeric keyboard to be invoked on all Android devices, the field type must be changed to type=number, however, this may cause issues with leading zeroes in some browser versions – therefore if changing to type=number, make absolutely sure to handle these exceptions.)

<input type="text" autocorrect="off" autocomplete="postal-code">

Credit card number field

Numeric keyboard. (Note: for the numeric keyboard to be invoked on all Android devices, the field type must be changed to type=number, however, this may cause issues with leading zeroes in some browser versions – therefore if changing to type=number, make absolutely sure to handle these exceptions.)

<input type="text" inputmode="decimal" pattern="[0-9]*" novalidate autocorrect="off" autocomplete="cc-number">

Credit card security code field

Numeric keyboard. (Note: for the numeric keyboard to be invoked on all Android devices, the field type must be changed to type=number, however, this may cause issues with leading zeroes in some browser versions – therefore if changing to type=number, make absolutely sure to handle these exceptions.)

<input type="text" inputmode="decimal" pattern="[0-9]*" novalidate autocorrect="off" autocomplete="cc-csc">

Quantity field

Semantic numeric keyboard.

<input type="number" inputmode="decimal" pattern="[0-9]*" novalidate>

Date field

Date picker keyboard. (Note: you may want to implement an actual calendar date picker.)

<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 48 mobile e-commerce sites across the 5 touch keyboard guidelines in both 2013 and 2015, and the results are as follows:

#1: Disable Auto-Correct When the Dictionary is Weak

Is auto-correct disabled for 'Address Line'?

13% improvement since 2013

21% adhere · 79% violate

#2: Show Optimized Keyboard Layouts

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

6% improvement since 2013

46% adhere · 54% violate

#3: Honor the 'Next' and 'Previous' Button Behavior

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

4% improvement since 2013

100% adhere · 0% violate

#4: Configure Auto-Capitalization Appropriately

Is auto-capticalization disabled on the email field?

13% improvement since 2013

73% adhere · 27% violate

#5: Invoke Touch Keyboards Consistently

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

27% improvement since 2013

75% adhere · 25% violate

Show detailed breakdown

Site #1 #2 #3 #4 #5
Amazon 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
Staples 2015 Violated Adhered Adhered Violated Adhered
- 2013 Violated Violated Adhered Violated Adhered
Dell 2015 Violated Adhered Adhered Violated Adhered
- 2013 Violated Violated Adhered Violated Violated
Office Depot 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Violated
Walmart 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Adhered Adhered Adhered Adhered Adhered
Sears 2015 Adhered Violated Adhered Violated Adhered
- 2013 Violated Violated Adhered Adhered Violated
Best Buy 2015 Violated Violated Adhered Adhered Violated
- 2013 Violated Violated Adhered Violated Adhered
Newegg 2015 Violated Violated Adhered Violated Violated
- 2013 Violated Violated Adhered Violated Violated
Costco 2015 Violated Violated Adhered Violated Violated
- 2013 Violated Violated Adhered Violated Violated
Macy's 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Violated
Victoria's Secret 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
HP 2015 Violated Violated Adhered Violated Violated
- 2013 Violated Violated Adhered Adhered Violated
J.C. Penney 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
L.L. Bean 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Violated Adhered
Target 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
GAP 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
Williams Sonoma 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Overstock 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
Amway 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Violated Adhered Violated Violated
Toys'R'Us 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Adhered
Kohl's 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Violated Violated
Rakuten 2015 Violated Violated Adhered Violated Violated
- 2013 Violated Violated Adhered Violated Violated
Nordstrom 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
Nieman Marcus 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Cabela's 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Violated Violated
Barnes & Noble 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Adhered Violated Adhered Adhered Violated
Home Depot 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Violated Adhered
Musician's Friend 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Violated Adhered Adhered Violated
1-800 Flowers 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Adhered Adhered Adhered Violated Adhered
Gilt 2015 Violated Adhered Adhered Adhered Violated
- 2013 Violated Adhered Adhered Violated Adhered
J.Crew 2015 Violated Violated Adhered Adhered Violated
- 2013 Violated Adhered Adhered Adhered Adhered
Foot Locker 2015 Adhered Adhered Adhered Adhered Violated
- 2013 Violated Adhered Adhered Adhered Adhered
Crate & Barrel 2015 Violated Violated Adhered Adhered Violated
- 2013 Violated Adhered Adhered Adhered Adhered
American Eagle 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Blue Nile 2015 Violated Violated Adhered Adhered Violated
- 2013 Violated Violated Adhered Adhered Violated
REI 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Yoox 2015 Violated Violated Adhered Adhered Violated
- 2013 Violated Violated Adhered Violated Violated
Microsoft 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
Ralph Lauren 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Violated Adhered Violated Violated
FTD 2015 Violated Violated Adhered Violated Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Diapers.com 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Walgreens 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Violated Violated
Disney Store 2015 Violated Adhered Adhered Adhered Violated
- 2013 Violated Violated Violated Violated Adhered
Hayneedle 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered
Nike 2015 Adhered Adhered Adhered Adhered Adhered
- 2013 Adhered Violated Violated Adhered Violated
Build.com 2015 Violated Adhered Adhered Adhered Adhered
- 2013 Violated Violated Adhered Adhered Violated
CVS 2015 Violated Violated Adhered Adhered Adhered
- 2013 Violated Violated Adhered Violated Adhered
Eddie Bauer 2015 Adhered Violated Adhered Adhered Adhered
- 2013 Violated Adhered Adhered Adhered Adhered

Examples of Poor Implementations

Examples of Good Implementations