12th January 2012

Specifying keyboard type for web forms on mobile devices

Guides By 5 years ago

Who gets annoyed when they have to switch their mobile keyboard over to the number pad each time they have to enter a phone number in a web form? With some very simple HTML5 code I am going to show you have you can enhance someones user experience with your web forms so the right keyboard for the job shows up automatically.

HTML5 has introduced a new properties for the type attribute for input elements. The new values are for contact details and include:

  • an email address (type=’email’)
  • a website addres (type=’url’)
  • telephone numberĀ (type=’tel’)

You won’t see any difference when viewing on your desktop HTML5 compatible browsers however if you view the forms with Mobile Safari it will automatically use the appropriate keyboard for the job.

The Code

By default text fields are given the type=”text” attribute. Simple change the type value from text to the relevant type of contact detail such as email for an email address field.

<label for="email">Name:</label><input name="name" id="name" type="text" />
<label for="email">Email:</label><input name="email" id="email" type="email" />
<label for="email">Phone:</label><input name="phone" id="phone" type="tel" />
<label for="email">Website:</label><input name="web" id="web" type="url" />

The iOS keyboards

The image below shows the different types of keyboards you will see for each of the HTML5 type attributed fields.

A very simple enhancement that is sure to pleasantly enhance your users web experience!

Recommended Posts

CSS tips and tricks for styling forms

Post by 5 years ago

Some simple CSS tips and tricks for styling your forms. The tutorial includes rounded corner fields, styling based on input field types, applying on focus styles and using images as submit buttons.

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!