Autofill and new password forms

[simonrjones]

Problem

Passwords seem to autofill on forms using autofill=off.

We were using the following HTML in an admin area where an admin user needs to create new users. We don't want the current user's email/password auto filling.

<input type="password" class="tbxforms-input tbxforms-input--text" name="password" id="password" value="" autocomplete="off">

The above appeared to autofill username & password on Windows Edge.

Solution
It would be valuable to have some clear patterns we can re-use for things like login, sign up forms. I appreciate we need to test these and see how reliably they work.

If the team come up with patterns for this, should we add this to https://amplify.studio24.net/amplify/fundamentals/forms.html

Or have separate pages for this sort of thing?

References
Re: https://amplify.studio24.net/amplify/fundamentals/forms.html

Use autocapitalize="none", autocorrect="off" and spellcheck="false" to stop browsers automatically changing user input on fields that expect grammatically incorrect data, such as email addresses and passwords.

I think the attribute is supposed to be autocomplete, not autocorrect.

https://caniuse.com/?search=autocomplete reports patchy support for autocomplete=off

GOVUK notes:

Many browsers will autofill password inputs, even when the autocomplete attribute is missing or set to off.

https://design-system.service.gov.uk/components/password-input/

[NicolaSaunders]

Thanks for this @simonrjones. Agree it will be good to get a solid patterns documented for this (or as solid as we can, given that last note from GOVUK)

For the moment, I think all things related to forms should be noted on the forms page. Currently only form error messages have a dedicated page - mainly because the JavaScript that brings the error message into focus was causing the page to automatically scroll half way down to where the error message was when it was all covered on a single page, which was jarring.

I would suggest a new headed section on the current forms page discussing the use cases for disabling autofilling of form inputs where necessary and providing examples.

The autocorrect="off" attribute is for Safari only - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect. Together with spellcheck="false" it aims to prevent the browser from automatically changing what could be a specifically mis-spelt word in a password phrase.

MDN suggests using autocomplete="new-password" for the password input to prevent autofilling, although they do say this is still only a hint - see https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion

[NicolaSaunders]

Adam Silver has written a blog post about this: Stopping Chrome from ignoring autocomplete=off

[simonrjones]

Thanks @NicolaSaunders very useful.

Do you think it's possible for us to expand our form patterns in Amplify to help with this? Sounds like this one needs more experimentation & testing to find a solution we're happy with. /cc @gtrinkwon who has also looked at this.