This post is iOS-centric, but the concepts remain the same for most mobile devices.
This weekend, I was using my iPhone, once to verify my debit card so I could rent a Redbox movie, and once to complete a survey after a negative experience at my local gas station. Both times, I was asked by the app and website to enter information that was numbers only into a input field, yet both sites presented me with the full iOS keyboard, making entry difficult. The survey code this app wanted me to enter was 16 digits, but that’s a whole different discussion.
Click for a larger version:
Annoying, right? The thing is that iOS ships with keyboards specially for entering phone numbers, websites and email addresses. Adding them to your website is easy and will make the lives of your site visitors who are on mobile devices better. Apple says this in their developer docs:
Whenever the user taps in an object capable of accepting text input, the object asks the system to display an appropriate keyboard. Depending on the needs of your program and the user’s preferred language, the system might display one of several different keyboards. Although your app cannot control the user’s preferred language (and thus the keyboard’s input method), it can control attributes of the keyboard that show its intended use, such as the configuration of any special keys and its behaviors.
Here are the iOS keyboards:
All it takes is adding an element to your input field and iOS devices will show the correct keyboard.
Text:
<input type="text" />
Telephone:
<input type="tel" />
URL:
<input type="url" />
Email:
<input type="email" />
Zip code:
<input pattern="[0-9]*" type="text" />
That bit of code will greatly improve the usability of your app, cut down on mistakes in data entry and generally make your users happier. With more and more people using their devices, this is a simple fix to use even on your static/CMS web forms. It will render correctly.