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 someone’s user experience with your web forms so the right keyboard for the job shows up automatically.

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

• an email address (type=’email’)
• a website address (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. Simply change the type value from text to the relevant type of contact detail such as email for an email address field.

<label for="name">Name:</label><input name="name" id="name" type="text" />
<label for="email">Email:</label><input name="email" id="email" type="email" />
<label for="phone">Phone:</label><input name="phone" id="phone" type="tel" />
<label for="web">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!