Specify Automatic Form Functionality
Form fields have four attributes that give you control over their automatic behavior: autocomplete
, spellcheck
, autocapitalize
, and autocorrect
. The first two included in the HTML spec, while the other two are non-standard but still worth implementing.
Autocomplete
The autocomplete
attribute tells the browser if it should provide autocomplete functionality for a form field. Aside from the basic choices of on
and off
for the value of this attribute, there are a wide variety of choices to specify what, exactly, the browser should put in a given form field. Here are some examples:
name
username
new-password
current-password
email
address-line1
postal-code
That’s just a sample. There are a bunch of other possible values covering things like payment details, personal information, and more. You can find a complete list with details for each possible value, along with a handy table, in the WHATWG Standard.
Adding the autocomplete
attribute to form fields when appropriate can make filling your form out a lot easier for everyone, especially people using mobile devices that are difficult to type on.
Spellcheck
Just what it says on the tin: the spellcheck
attribute controls the automatic spell check functionality of a form field. Possible values are true
, false
, and default
. This attribute comes in handy if you have a text field that’s going to accept something like a special token (like a coupon code), URL, or programming code.
Autocapitalize
As I mentioned above, the autocapitalize
attribute is non-standard. It’s only supported in Safari on iOS and Chrome. Possible values are sentences
, words
, characters
, and none
.
Despite being non-standard this attribute can still help a ton of people and make your form a lot easier to fill out, and including it has no negative impact. Browsers that don’t support it will simply ignore it.
Autocorrect
The autocorrect
attribute is also non-standard, and this attribute is only supported in Safari on iOS. Possible values are on
and off
.
Again, this has the potential to help people have a better experience filling out your forms, and there’s no downside to including it.
These four attributes, when used wisely, can make the difference between a frustrating form experience and a pleasant one. Implementing these usually only takes a few minutes. This is time I’m sure your visitors will consider well-spent.