Owning a mobile and a tablet, I spend a fair amount of time browsing websites on one of these two devices and a few thing’s tend to frustrate me and they both come to when filling in forms. Fortunately, it’s quite easy to add in a few changes to your forms to make sure that are mobile/tablet ready.
HTML5 Form Inputs
When HTML5 arrived on the scene, so did a range of new input types at our disposal. These new input types allow us to specify that the user is entering content such as an email address, a telephone number, a website url just to name a few. If your asking yourself if you can implement these now, well great news, older browsers that can’t render HTML5 will just default back to the standard text input, depreciating nicely. No excuses!
<form>
<input type="email" value="" name="" />
<input type="tel" value="" name="" />
<input type="url" value="" name="" />
</form>
These new input types don’t appear any different when browsing from your desktop, but when on a mobile or a tablet, you will notice the difference, lets take a look…
We can also define a placeholder on form elements. Placeholders act just like they sound, they allow us to drop in some temporary value into the form element that will assist the user’s input. An example of this is shown below:
<input type="email" placeholder="eg. john@smith.com" />
Instantly we have two new things we can do that will make the user’s life easier when filling in forms on your websites.
Auto Capitalization/Correction
There is one more thing that frustrates me, especially when on my iOS devices and that is auto capitalization and auto correction. When I am filling in my Email Address, 90% of the time the input box will make the s in my email a capital. This isn’t a big deal and doesn’t stop my email from been correct but it messes with my karma.
A better example of why you might want to turn this off could be in some instances when you want a user to enter a code of some sort or some content that is case sensitive.
Another niggle of mine is the auto correction. Don’t get me wrong, when texting or writing an email etc this is a gold mine! But in some circumstances it just isn’t required, or it does more bad then good.
I find this feature particularly annoying when typing my email address. As I type ‘stu’ as per the beginning of my email, my iPhone tries to correct it to be ‘Stu Greenham’, and more often then not I have to delete the input and start again.
Fortunately Mobile Safari supports two attribute’s that we can use on input elements called autocapitalize and autocorrect. Here is some example code:
<input type="email" autocorrect="off" autocapitalize="off" />
Now whilst implementing these few changes will not change the world, they will help make the life of the user’s that little bit sweeter.