Form

Password (create)

Published on

Description

The password create input is a Password input with autocomplete="new-password". Use it when someone sets or changes a password, so browsers and password managers offer to generate one and save it.

Put a username field before it in the same form so the saved password is stored against the right account.

Example

Open in new tab
View HTML markup 
<form method="POST" novalidate="">
  <div><label for="username"> Username</label> <input value="" id="username" name="username" dir="auto" autocapitalize="off" autocomplete="username" autocorrect="off" spellcheck="false" type="text" /> </div>
  <div><label for="new-password"> Create a password</label> <span id="new-password-hint">Use at least 15 characters</span> <input value="" id="new-password" name="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" is="ds-input-password" autocomplete="new-password" type="password" aria-describedby="new-password-hint" /> </div> <button type="button">Create account</button>
  <p>Need help? <a href="/form/input-password-create" target="_top">View our guidance</a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association with clear label text.
  • State the password rules in the hint before the person types, not only in an error afterwards.
  • Do not block paste; it breaks password managers.

References

Variables

  • None for input