Use HTML5 Input Types to Make Users Happy

If you are like me, you get annoyed when they have to switch your mobile keyboard over to the number pad each time they have to enter a phone number in a web form. Or flip to symbols to find the @ sign for email addresses.  With some very simple HTML5 code you can enhance someones user experience with your web forms so the right keyboard for the job shows up automatically.

HTML5 has introduced a property 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’)

For example “<input name=”email” id=”email” type=”email” />”

You’re not going to see any difference when viewing on your desktop HTML5 compatible browsers however if you view the forms with Mobile Safari browser (on IOS) it will automatically use the appropriate keyboard for the job.

The iOS keyboards

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

 

 

Its a very simple enhancement that is sure to pleasantly enhance your users web experience! So coders, don’t be lazy, consider the end user and create for them.  And me.  🙂

Posted in Code, Mobile | Comments Off on Use HTML5 Input Types to Make Users Happy