Switch off autocomplete for an HTML form field

Posted December 6th, 2008 in HTML and CSS

Auto complete in form fields in web browsers can be extremely useful for helping a user to quickly complete a form. However there are times when you want to disable it, for example with the fields on a credit card payments form. This post looks at how to switch off autocomplete for an HTML form field.

The screenshot below shows auto complete in action on an example credit card form. As I started typing in the number 4 it offered a drop down box with all the cards entered that had started with 4 (in this example it only had a sample card number in the autocomplete history).

The red arrow in the screenshot shows the auto complete box.

You really don't want auto complete enabled for credit card fields in a form so this is a good example of a form field where it should be disabled.

A normal text field might look like this:

<input type="text" name="first_name" value=""  />

To switch off autocomplete simply add autocomplete="off" like so:

<input type="text" name="first_name" value="" autocomplete="off"  />

That's all there is to it. Now the auto complete popup won't appear for that field.