Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML password autocomplete: distinguish current and new credentials

Last updated: 1 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

Autocomplete tokens identify the purpose of a credential field so the browser can offer appropriate stored values.

When it earns its place

A staff sign-in form asks for an account name and the current password. Naming the fields username and current-password helps password managers offer the correct secret, rather than treating a change-password field as a login field. On a password reset form, use new-password for the replacement secret; one-time-code belongs to a separate verification code field. These hints are about autofill semantics. The server still authenticates the account, limits abuse, and protects the session after login.

html
<form action="/staff/session" method="post">
  <label for="staff-account">Staff account</label>
  <input id="staff-account" name="username" autocomplete="username" required>
  <label for="staff-secret">Current password</label>
  <input id="staff-secret" name="password" type="password" autocomplete="current-password" required>
  <button type="submit">Sign in</button>
</form>

Browser boundary

A password input hides typed characters on screen; it does not encrypt transport or make client-side validation trustworthy. Autocomplete behavior can vary by browser and password manager, and the form needs HTTPS in any real deployment.

Cost and maintenance

The markup is tiny. Correct field semantics can reduce failed logins and password-reset confusion, while the operational cost lies in the authentication service and its security controls.

Common Mistakes

  • Do not label a replacement secret current-password.
  • Do not disable useful password-manager behavior to conceal a broken form.
  • Do not treat type=password as a substitute for HTTPS and server authentication.

Connected lessons

html
forms
Storage details