Web Forms and Mobile Keyboards

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.

three iphone mobile forms

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
  • email
  • 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s