436

When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

will flag a warning on the W3C validator:

there is no attribute "autocomplete".

Is there a standards-compliant way to disable browser auto-complete on sensitive fields in a form?

Improve this question
14
  • 10
    Are you sure that messing with the user's autocomplete setting is what you want to do? If they have it turned on, they probably like it. Autocomplete is a completely browser-side feature, much like the button that allows the user to change font size, etc. You shouldn't interfere with their wishes Commented Feb 24, 2009 at 16:25
  • 113
    Even for something as sensitive as Credit card number? I can't think of very many people who would want that remembered - especially since auto-complete is on by default in most browsers. If they want it remembered that bad, they can use something that fills out forms like Google toolbar. Commented Feb 24, 2009 at 19:16
  • 13
    My use case is slightly different - I am rolling my own autocomplete and I don't want it to clash with the browser's. I only just discovered that autocomplete="off" is invalid, but it seems there's no other simple solution (injecting it with js is just silly) Commented Feb 11, 2010 at 17:27
  • 13
    @rmeador because sometimes we want to provide a more user-friendly alternative to the standard auto-suggest box. @corydoras please don't push your OSX weight around, it's not helpful to the resolution of this question. Commented Mar 7, 2011 at 21:54
  • 12
    The problem is that the banks will hold the merchant liable if a fraudulent transaction took place... even if its the customer's fault at 100%. Therefore, in some circumstances, it is legitimate to disable the feature for the customer. Commented Oct 23, 2011 at 18:52

18 Answers 18

Reset to default
429

Here is a good article from the MDC which explains the problems (and solutions) to form autocompletion. Microsoft has published something similar here, as well.

To be honest, if this is something important to your users, 'breaking' standards in this way seems appropriate. For example, Amazon uses the 'autocomplete' attribute quite a bit, and it seems to work well.

If you want to remove the warning entirely, you can use JavaScript to apply the attribute to browsers that support it (IE and Firefox are the important browsers) using someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Finally, if your site is using HTTPS, IE automatically turns off autocompletion (as do some other browsers, as far as I know).

Update

As this answer still gets quite a few upvotes, I just wanted to point out that in HTML5, you can use the 'autocomplete' attribute on your form element. See the documentation on W3C for it.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Looks like Firefox doesn't turn off autocomplete on https, but that's a useful piece of knowledge. Thanks!
Safari does not respect the autocomplete="off" attribute. See stackoverflow.com/questions/22817801/…
autocomplete may be used not only on form element, and off value works at least in chromium-40.0.2214.115
The w3c seems to be expanding the standards for autocomplete in HTML5.1 (in draft as of this comment) w3c.github.io/html/…
If nothing works, Use textarea instead of textbox to turn off autocomplete.
65

I would be very surprised if W3C would have proposed a way that would work with (X)HTML4. The autocomplete feature is entirely browser-based, and was introduced during the last years (well after the HTML4 standard was written).

Wouldn't be surprised if HTML5 would have one, though.

Edit: As I thought, HTML5 does have that feature. To define your page as HTML5, use the following doctype (i.e: put this as the very first text in your source code). Note that not all browsers support this standard, as it's still in draft-form.

<!DOCTYPE html>
Improve this answer

1 Comment

All browsers expect older versions of Konqueror support it. Even IE6 supports it. It's the doctype to go.
58

HTML 4: No

HTML 5: Yes

The autocomplete attribute is an enumerated attribute. The attribute has two states. The on keyword maps to the on state, and the off keyword maps to the off state. The attribute may also be omitted. The missing value default is the on state. The off state indicates that by default, form controls in the form will have their autofill field name set to off; the on state indicates that by default, form controls in the form will have their autofill field name set to "on".

Reference: W3

Improve this answer

1 Comment

@freestock.tk Yeah it's clearer than all the others. Simplicity matters.
32

No, but browser auto-complete is often triggered by the field having the same name attribute as fields that were previously filled out. If you could rig up a clever way to have a randomized field name, autocomplete wouldn't be able to pull any previously entered values for the field.

If you were to give an input field a name like "email_<?= randomNumber() ?>", and then have the script that receives this data loop through the POST or GET variables looking for something matching the pattern "email_[some number]", you could pull this off, and this would have (practically) guaranteed success, regardless of browser.

Improve this answer

7 Comments

This would make automatic testing harder.
Would make automatic testing harder, only if your testing software cant cope check for / read fields that might have a random number appended to them. Might be time to upgrade your automated testing software.
The autocomplete info would still be saved in the browser's data directory, would it not?
Presumably. But it wouldn't be expected to ever actually appear again to the user.
Chrome now uses the type="password" attribute rather than the name attribute for a particular site. I have name="newpassword" autocomplete='off' type="password" and it gets autofilled! If I change the type, no autofill
|
31

No, a good article is here in Mozila Wiki.

I would continue to use the invalid attribute. I think this is where pragmatism should win over validating.

Improve this answer

Comments

23

How about setting it with JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

It's not perfect, but your HTML will be valid.

Improve this answer

1 Comment

Using javascript as a workaround to validation errors is like sweeping dust under the rug. While the HTML document may become valid, the resulting HTML+JS page will not be.
19

I suggest catching all 4 types of input:

$('form,input,select,textarea').attr("autocomplete", "off");

Reference:

Improve this answer

1 Comment

could use :input too
11

If you use jQuery, you can do something like that :

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

and use the autocompleteOff class where you want :

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

If you want ALL your input to be autocomplete=off, you can simply use that :

$(document).ready(function(){$("input").attr("autocomplete","off");});
Improve this answer

4 Comments

Just using HTML5 doctype is easier and better.
this isn't really valid html anyway, it's just setting the (invalid) autocomplete attribute in a different way other than in the html
This code doesn't work for me; I've used $('input.autocompleteOff').val(''); which seems to be OK.
Using javascript as a workaround to validation errors is like sweeping dust under the rug. While the HTML document may become valid, the resulting HTML+JS page will not be.
8

Another way - which will also help with security is to call the input box something different every time you display it: just like a captha. That way, the session can read the one-time only input and Auto-Complete has nothing to go on.

Just a point regarding rmeador's question of whether you should be interfering with the browser experience: We develop Contact Management & CRM systems, and when you are typing other people's data into a form you don't want it constantly suggesting your own details.

This works for our needs, but then we have the luxury of telling users to get a decent browser:)

autocomplete='off'
Improve this answer

Comments

8

autocomplete="off" this should fix the issue for all modern browsers.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

In current versions of Gecko browsers, the autocomplete attribute works perfectly. For earlier versions, going back to Netscape 6.2, it worked with the exception for forms with "Address" and "Name"

Update

In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute, for example:

autocomplete="nope"

Since this random value is not a valid one, the browser will give up.

Documetation

Improve this answer

2 Comments

Modern browsers don't respect autocomplete=off by choice. :/ Unfortunately.
@Alexus added some update...internet change very fast
6

Using a random 'name' attribute works for me.

I reset the name attribute when sending the form so you can still access it by name when the form is sent. (using the id attribute to store the name)

Improve this answer

Comments

5

Note that there's some confusion about location of the autocomplete attribute. It can be applied either to the whole FORM tag or to individual INPUT tags, and this wasn't really standardized before HTML5 (that explicitly allows both locations). Older docs most notably this Mozilla article only mentions FORM tag. At the same time some security scanners will only look for autocomplete in INPUT tag and complain if it's missing (even if it is in the parent FORM). A more detailed analysis of this mess is posted here: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms.

Improve this answer

Comments

3

Not ideal, but you could change the id and name of the textbox each time you render it - you'd have to track it server side too so you could get the data out.

Not sure if this will work or not, was just a thought.

Improve this answer

Comments

2

I think there's a simpler way. Create a hidden input with a random name (via javascript) and set the username to that. Repeat with the password. This way your backend script knows exactly what the appropriate field name is, while keeping autocomplete in the dark.

I'm probably wrong, but it's just an idea.

Improve this answer

Comments

2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Improve this answer

Comments

0

I MADE THIS WORK IN 2020!

I basically create a css class that applies -webkit-text-security to my inputs.

Here's the link to a more recent discussion: https://stackoverflow.com/a/64471795/8754782

Improve this answer

Comments

-1

This solution works with me:

$('form,input,select,textarea').attr("autocomplete", "nope");

if you want use autofill in this region: add autocomplete="false" in element ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Improve this answer

Comments

-5

Valid autocomplete off

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Improve this answer

1 Comment

surely if a user had JS switched off though, they can't complete an order as they can't enter their card number? Better to supplement the attribute via JS I'd say - worst case, JS off gives the card number field with the potential for auto-complete, but at least they can place an order... just a thought :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.