HTML Autocomplete Attributes for Safari Password Forms

This article provides a concise guide on the exact HTML autocomplete attributes web developers must use so the Safari web browser can accurately detect password creation and password change forms. By implementing the username, current-password, and new-password attributes correctly, developers enable Safari and iCloud Keychain to seamlessly suggest strong passwords, autofill existing credentials, and update saved passwords without confusing the user's login data.

The Three Required Attributes

To communicate the purpose of your form inputs to Safari, you must use three specific autocomplete values:

• autocomplete="username": Identifies the field containing the user's account identifier (such as an email address or username). Safari uses this to associate the password with the correct account.
• autocomplete="new-password": Tells Safari that the user is creating a brand-new password. This triggers Safari’s automatic strong password generator.
• autocomplete="current-password": Tells Safari that the user needs to enter their existing password. This triggers Safari to autofill the currently saved password from the user's keychain.

Account Creation (Sign-Up) Forms

When a user is creating an account for the first time, Safari needs to know which field is the identifier and which field requires a newly generated password.

For a registration form, apply autocomplete="username" to the user ID or email input, and autocomplete="new-password" to the password input. If your form includes a "Confirm Password" field, it must also use autocomplete="new-password".

<form action="/signup" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="new-password" required>

  <label for="confirm-password">Confirm Password:</label>
  <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required>

  <button type="submit">Sign Up</button>
</form>

Password Change Forms

Password change forms are often misinterpreted by browsers if the attributes are missing. Safari needs to autofill the old password while simultaneously offering a strong generated password for the new field.

To achieve this, use autocomplete="current-password" for the old password field, and autocomplete="new-password" for the new password and confirmation fields.

The Hidden Username Requirement

For Safari to know which account's password is being updated, the autocomplete="username" field must be present inside the same <form> element. Because users are usually already logged in when changing their password, you likely do not want to display a username field. You can solve this by including the username input and hiding it with CSS (display: none).

<form action="/change-password" method="post">
  <!-- Hidden username field so Safari associates the new password with the correct account -->
  <input type="text" name="username" value="user@example.com" autocomplete="username" style="display: none;">

  <label for="old-password">Current Password:</label>
  <input type="password" id="old-password" name="old-password" autocomplete="current-password" required>

  <label for="new-password">New Password:</label>
  <input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

  <label for="confirm-new-password">Confirm New Password:</label>
  <input type="password" id="confirm-new-password" name="confirm-new-password" autocomplete="new-password" required>

  <button type="submit">Update Password</button>
</form>

Password Reset (Forgot Password) Forms

If a user is resetting a forgotten password via an email link, they will not need to enter their current password. However, you should still include the hidden autocomplete="username" field populated with their email or username, alongside the autocomplete="new-password" fields. This ensures Safari updates the existing credentials in the iCloud Keychain rather than creating a duplicate entry without a username.