How to disable auto-complete on login forms

Disabling auto-complete in login forms is probably a bad idea, since it encourages weak passwords.

If you are still forced to implement this (maybe due to legal or policy requirements), this is how:

Prevent browsers from saving the password in the first place. Disabling autocomplete does not improve security.

How to prevent password saving:

To prevent the browser from saving passwords (and usernames), you need to:

• copy username and password to hidden form fields before submitting the login form
• clear the visible username and password fields
• set autocomplete=off for good measure

This makes the browser attempt to save empty credentials, or not save at all.

A login form might look like this:

Copy<form action='/login' class='login-form' autocomplete='off'>
  Email:
  <input type='email' name='email-entry'>
  <input type='hidden' name='email'>

  Password:
  <input type='password' name='password-entry'>
  <input type='hidden' name='password'>
</form>

<script>
  $('.login-form').on('submit', function() {
    $('[name="email"]').val($('[name="email-entry"]').val());
    $('[name="email-entry"]').val('');
    $('[name="password"]').val($('[name="password-entry"]').val());
    $('[name="password-entry"]').val('');
  });
</script>

What about simply using autocomplete=off?

Recent versions of all major browsers (Chrome, Firefox, IE) will all ignore autocomplete=off on login forms (and sometimes in other places, causing much mayhem).

There are workarounds for this (see Chrome 34+, Firefox 38+, IE11+ ignore autocomplete=off), but those will not improve security.
They work by tricking the browsers to fill in fake invisible inputs, instead of the real ones. An attacker with control over a victim's browser can simply use JavaScript or web developer tools to retrieve values from those inputs.