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-6.png

Recent Features

Incredible Demos

  • Duplicate the jQuery Homepage Tooltips Using&nbsp;MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • Save Web Form Content Using Control +&nbsp;S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

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!