Treehouse

Prevent Form Field Autocomplete

By on  

Preventing autocompletion of form fields is incredibly important since we never know where our users are completing them from. They could complete them from a super secure computer or an incredibly public computer. Regardless of security level, some field values should never be remembered, like credit card number, social security number, etc. Preventing autocompletion is as simple as adding one attribute to a FORM tag for individual form fields.

The HTML

The autocomplete attribute is the key. This attribute may be added FORM tags to prevent any autocompletion:

<form method="post" autocomplete="off">

You may also isolate single fields for preventing autocompletion:

<input type="text" name="credit_card" autocomplete="off" />

Big detail, simple task, simple solution.

ydkjs-4.png

Recent Features

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

Discussion

  1. Slow day for blog posts? :P

  2. Pritesh Desai

    its a bad idea to make users type out their email id, name etc on every website. There’s a reason why autocomplete was invented.

    • As I stated, there are credit card numbers, social security numbers, passwords, etc. Those shouldn’t be remembered.

  3. simple-touriste

    Passwords should be remembered IF users want to them of be remembered.

    There is a bug about that in Chromium:
    https://code.google.com/p/chromium/issues/detail?id=177290

    Until it’s fixed, there is an add-on for this:

    By using the feature, websites force me to use this add-on, which could decrease my security.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!