Daily Tips & Tricks for Web Enthusiasts

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.