In the previous post about Disabling Autocomplete, Autocapitalise and Autocorrect we looked at how we can improve forms for mobile and desktop use. This post will look at input types, specifically the url, phone and email.
The Syntax for different input types
Very similar to a standard text input you declare the type as “email” or “url” or “phone”:
<input type="phone" value=" " /> <input pattern="[^ @]*@[^ @]*" type="email" value=" " /> <input type="url" value=" " />
On a mobile device the input type phone will show the numbers on the keyboard, the email address input type will show the @ sign and the URL input type will show the forward slash, .co.uk (or .com).
Grab your nearest tablet or smartphone and try it out:
The purpose of HTML5 input types
Here are some of the advantages of using the correct input types:
- Mobile Accessibility – this is very important, if it was the standard text input box then the keyboard won’t recognise that the user has to input a phone number, email or a website URL. By telling the browser this the keyboard can then adapt so if it was a number then the keyboard changes to a number layout, if it is a email then a “@” shows and if it is a URL then “.co.uk” and “.” show.
- The input type is more semantically correct
- Easier to style all email input types with [type=email], phone with [type=phone] and url with [type=email]
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.