Specifying keyboard type for web forms on mobile devices

Guides By 6 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!