In-depth Analysis of HTML Form Autofill and Password Managers: Special Behavior of autocomplete Attribute on Password Fields

Dual Mechanisms of Browser Form Features

In modern web development, browsers provide two related yet distinct features for forms: form autocomplete and password managers. Understanding the difference between these is crucial for addressing autocomplete attribute issues.

Form autocomplete primarily targets text-type input fields such as <input type="text">. Browsers record values entered by users in these fields and offer suggestions via dropdown lists when users type again. This is a relatively simple feature that generally works well.

Password managers are more complex. When a browser detects that a user has submitted a login form, it prompts to save the username and password combination. Upon returning to the site, most browsers (e.g., Firefox, Chrome, Internet Explorer) display available usernames in a dropdown for the username field, while some (e.g., Opera) use toolbar buttons. Chrome also highlights these fields with a hard-coded yellow color.

Edge Cases with autocomplete="off" on Password Fields

An edge case arises when forms are tagged with autocomplete="off": if it is a login form and the user has previously stored a username and password, how do browsers handle this? Actually, removing password data from the local database seems inappropriate, so likely no browser does this (in fact, data from form autocomplete is not erased either).

Different browsers adopt varying strategies: Firefox decides to empower the user—since the user has a password, it allows its use; Chrome decides to empower the site. This implementation discrepancy leads to inconsistent behavior of autocomplete="off" on password fields.

Standard Solution: autocomplete="new-password"

According to the WHATWG HTML Standard and Mozilla Developer Network documentation, for password-type input fields, using the autocomplete="new-password" attribute is recommended. This value explicitly informs the browser that this is a new password field and should not autofill previously saved passwords.

Example code:

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

This approach adheres to web standards and works reliably in most modern browsers.

Alternative Solutions and Their Limitations

Beyond the standard solution, the developer community has proposed several other methods:

1. Using the readonly attribute: Set the field as readonly during form loading and remove the readonly attribute when the field gains focus. This prevents initial autofill.

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />

2. Adding a hidden text field: Place a hidden text field without name and id attributes above the password field. This interferes with the browser's autofill heuristics but may not be best practice.

<input type="text" style="display:none;">
<input type="password" name="pswd" id="password" maxlength="16" size="20">

3. Distinguishing text and password fields: Use autocomplete="off" or autocomplete="false" for text-type fields and autocomplete="new-password" for password-type fields. This provides clear semantic differentiation.

<input id="username" type="text" autocomplete="false">
<input id="password" type="password" autocomplete="new-password">

Security Considerations and Best Practices

When deciding whether to disable autofill, developers must balance security and user experience. While disabling autofill may be necessary in certain contexts (e.g., banking applications or sensitive systems), allowing password managers to function in most user login scenarios can enhance both user experience and security (by encouraging strong passwords and password manager usage).

Best practices include:

• Following web standards by using autocomplete="new-password" for password fields
• Disabling autofill only when necessary and documenting reasons clearly
• Testing behavior across different browsers
• Considering accessibility needs to ensure alternatives do not affect users of assistive technologies

By understanding browser implementation mechanisms and adhering to standards, developers can more effectively manage form autofill behavior while ensuring good user experience and security.