Navigation
Navigation
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
At HP, the credit card field doesn’t invoke a numeric keyboard, increasing the likelihood of typing errors.
Urban Outfitters 1 of 2: Note how a numeric keyboard is correctly used for credit card …
Urban Outfitters 2 of 2: … yet the (already difficult to understand) ‘Security Code’ field invokes the normal alphanumeric keyboard.
Examples of Good Implementations
With auto-correction disabled, Nike allows the user to enter their address without ‘dictionary intervention’.
Macy’s makes it easier to quickly fill in your e-mail by invoking the e-mail keyboard layout with ‘@’ and ‘.’ keys.
By invoking a numeric keyboard for the credit card field, Best Buy makes the 16-digit entry a breeze with large numeric keys.
Newegg correctly invokes the phone keyboard for the phone fields (however, they shouldn’t split the field).
Walmart invokes a numeric keyboard for the ZIP code field, indicating that a state prefix shouldn’t be included.
By invoking a numeric keyboard for the ‘Quantity’ field, Crate & Barrel increases the size of each key by 500%.