Navigation

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

E-mail field

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.)