Our smartphones try to anticipate our needs with basic features like autocorrect. While it often does work to proactively fix typos, there are also entire sites devoted to autocorrect gone awry. Did you know that you can disable autocorrect, autocapitalize, and even autocomplete on form fields with simple attributes?
Disabling autocorrect
Why would you disable autocorrect? Autocorrect automatically tries to find the nearest dictionary word when someone types into a field, but some form fields may not expect a dictionary word at all. Username, email, and URL fields in particular are almost never ideal for autocorrect. Any field that expects a proper name (such as first, last, or city name) can also be problematic with autocorrect enabled. (Autocomplete on the other hand can be super useful for these fields.)
Autocorrect is on by default. You can disable autocorrect on a form element by adding the following:
<input type="email" autocorrect="off">
Or an entire form like this:
<form autocorrect="off">
Tweaking autocapitalize
Autocapitalize is another semi-useful automatic feature that can be disabled judiciously. Where would you do this? Email and username fields are the most common and logical place to disable autocapitalize. In newer versions of iOS (anything newer than iOS 5), autocapitalize can actually be tweaked further. For instance, you can set autocapitalize="words" to have every word in a field capitalized automatically. This is especially useful for name, address, or city fields or to encourage title case in CMS title fields from mobile. In addition, you can set autocapitalize="characters" to set a field to full uppercase, which could be useful for state abbreviations or product keys. The default setting for autocapitalize is sentences. To turn it off completely, you’d specify none.
Examples of using autocapitalize:
To capitalize the first letter of every sentence (default):
<input type="text" name="subject" autocapitalize="sentences">
To turn off auto-capitalization:
<input type="text" name="username" autocapitalize="none">
To capitalize the first letter of every word:
<input type="text" name="yourname" autocapitalize="words">
To capitalize every letter:
<input type="text" name="state" autocapitalize="characters">
Autocomplete is useful most of the time
The autocomplete attribute is the only one of the three that’s actually part of the official HTML5 spec. It’s values can be on or off, though the default is on. (Note: Users can disable autocomplete at the browser setting level, but that is typically a conscious choice and not the default.) You can add the attribute to either specific input fields or to an entire form. In most cases, it’s best for the user experience to leave autocomplete on; however, it can ease frustration to turn it off in certain use cases such as fields that will have different input every time they are used, for instance title and body fields, search fields, or status fields.
Here’s a typical use case:
<input type="text" name="search" autocomplete="off">
In conclusion
While these attributes are useful to speed up and smooth out form completion on mobile devices, you shouldn’t rely on them to benefit the user in every circumstance. With the exception of autocomplete, they are not applicable in desktop browsers or even uniformly across all mobile devices. iOS has the best support for all three attributes, while many versions of Android do not support autocorrect or autocapitalize. That said, with just a few extra bits of code, you can make filling out forms much less frustrating for a large portion of your users by applying these attributes tactically.