Have you ever been on a mobile website, filling out a form, being asked for your email address, and much to your annoyance the keyboard being shown on your phone doesn’t have a “@” or a “.” on it? So you switch to an alternate keyboard display, but it would be so much nicer if the web developer knew that you were going to need those keys.
There is an easy way to fix this. Take a look at the image below of web forms on three separate iPhone screenshots. Notice how in the middle screen the focus is on the Email field and the primary keyboard shows the “@” and the “.” Notice how when the Telephone field is selected that the keyboard switches to numbers.
This is a very simple thing to do in the HTML code of your web forms. For each field, just be sure to set the type attribute accurately. For example:
<input type="email" placeholder="Enter your email address">
Just by adding type=”email” the mobile device will know which keyboard to present. The same goes for your telephone number.
<input type="tel" placeholder="Enter your phone number">
The full list of these HTML5 input field type attributes is:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
It’s just one simple thing you can do to improve the user experience of your website or application, especially on a mobile device. Subconsciously, the end user will be more at ease and think more highly of you.
