Web Form Usability Part 1: HTML5 Input Types
HTML input types are used when designing forms to set what type of data your users can input. However, they aren’t fully utilised by web designers. Sure, we use the occasional type=”password” to hide the characters when people type in their password, but HTML5 has a whole new set of options to make life easier. Let’s take a look:
Old HTML input types
|
New in HTML5
|
Browser support
Of course, browser support for each varies, with Google Chrome and Opera supporting 10 each, Safari supporting 9, Firefox supporting 2 and Internet Explorer, behind the times, not supporting any (according to W3 schools). However, there’s no need to worry – browsers that don’t recognize a type will treat it as type=”text” and render it as a plain text field.
Why difference do the new input types make?
People are increasingly using mobile devices to access the web, with nearly 15{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} of website hits/pageviews coming from a handheld mobile device.
At a recent seminar I went to about responsive design, Garry Byrne mentioned form design and input types when he talked about how the basics of responsive design are being ignored.
This is where the new input types become really useful, with the power of HTML5, you can optimise you input types to make it easier for those using mobile devices to input their vital information into your form.
For example, when entering your best phone number on the Attwood Digital free consultation form on a phone, the keyboard changes to a traditional phone layout. How did we achieve this? By setting the input type to “tel”.
Here’s another example. When inputting your email address, the keyboard layout changes again, with the “@” and “.” signs in easy reach, making it easier for your users to enter their email address quickly and with no hassle.
Other examples include:
- setting the field to “url” displays the “.com”, “.” and “/” buttons
- setting the field to “number” will display a number keyboard
Of course, different phones interpret the HTML5 input types differently but as I mentioned before, any input types that your device doesn’t support are treated as type=”text” so you can start using these HTML5 types straight away – and support will only increase with time.
Examples
The form below includes all the new HTML5 input types. Try it on different browsers to see the different effects, and try it on your mobile devices to test the different keyboards.
Gravity Forms
One final note – we develop most of our sites (including this one) in WordPress, and use the Gravity Forms plugin to manage our forms. This is a great plugin, which we would recommend (and so would the other 500,000 users that have downloaded it).
Using HTML5 input types with Gravity Forms is simple. Just go to the Gravity Forms settings.
On the settings page there’s an option called Output HTML5. Just select “Yes” to use HTML5 input types. It’s that simple!
