37

html5 now has some new attribute values for the autocomplete attribute to assist user-agents when autofilling forms. One of the new values, new-password, is used to tell the user agent to enter a new password, opposed to the user's current password.

What's not clear to me though, is how to properly tell it to generate the same password for both fields when your form makes the user enter the new password twice as a confirmation? Maybe by using the same custom section-* prefix on both inputs, such as autocomplete="new-password section-my-new-pw"? The spec mentions the section-* prefix will affect the autofill scope, but it's not overly specific about what that means for my case.

Here's a sample form that I imagine will represent what many websites will soon use - it distinguishes the current-password from the new-password, and makes the user confirm the new password.

<form>
    <p>Username             <input type="text"     autocomplete="username"         name="username"></p>
    <p>Current Password     <input type="password" autocomplete="current-password" name="current-password"></p>
    <p>New Password         <input type="password" autocomplete="new-password"     name="new-password"></p>
    <p>Confirm New Password <input type="password" autocomplete="new-password"     name="confirm-new-password"></p>
</form>

I much prefer if answers reference a documentation opposed to observations about how current browsers or extensions behave.

goat
  • 31,486
  • 7
  • 73
  • 96
  • 1
    You should not be using inputs inside paragraphs. – undefined Apr 18 '21 at 14:54
  • 1
    @undefined Why not? I've seen this practice in many examples from reputable sources for many years. i.e. [whatwg.org](https://html.spec.whatwg.org/multipage/forms.html#the-form-element) and [mozilla](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form) – goat Nov 05 '21 at 21:45
  • I believe it's outdated. Paragraphs are usually meant for text and using them as containers could cause issues with typography styling, especially spacing. `
    ` is usually much better for containers.
     – undefined Nov 06 '21 at 09:05
  • Inputs in

    are fine in comparison to unlabeled inputs. The example should be using

    – Robin Métral Mar 24 '23 at 09:55

1 Answers1

49

Just use autocomplete="new-password" at the confirmation input. And if you choose to generate a new password in the password input, the confirmation input gets filled with the same value instantly. Tested in chrome.

Reference:

  1. chrome advice
  2. html standard discussion
Marvin
  • 1,726
  • 1
  • 17
  • 25
  • 16
    IMO the referenced links are more clear than this answer. Basically you should use the `new-password` attribute on **BOTH** new and confirm password fields. – sonyisda1 Jan 29 '20 at 14:41
  • 2
    Works in Firefox too. – Skoua Nov 24 '20 at 21:25
  • As opposed to Chrome, Firefox will make the first ``'s text visible, so you can copy the password until the `input` is blurred (no longer in focus). – s3c Nov 19 '21 at 09:45