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.

Examples of Poor Implementations

At Sephora, ‘Helo’ is auto-(in)corrected to ‘Help’ because they haven’t disabled auto-correction. At Amazon, the phone keyboard isn’t invoked, presenting a bunch of alphanumeric characters instead (same for ZIP). At Newegg, the e-mail keyboard isn’t invoked for the e-mail address field.

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.