Triggering autocomplete fields on other forms in Chrome and Safari

Question

HTML

Hi all! Maybe someone faced such a problem, there are two forms on different pages, on the site, authorization and registration.
Authorization form:

form#login(action="/login", method="post")
    input#login_username(type="text", name="login_username", placeholder="Username")
    input#login_password(type="password", name="login_username", placeholder="Password")

Registration form:

form#register(action="/sign-up", method="post")
    input#sign_up_email(type="email", name="sign_up_email", placeholder="E-mail")
    input#sign_up_username(type="text", name="sign_up_username", placeholder="Username")
    input#sign_up_password(type="password", name="sign_up_password", placeholder="Password")

So, when logging in, the browser asks whether to save the password? If you allow him and after authorization try to open the registration form, then it will be filled with the same data, but I do not need it. And autocomplete="off" doesn't help. How does it recognize fields? Names and IDs are different for all fields. Changing the order of the fields and even deleting the "username" field does not help (in this case, it fills in "email" instead of "username".
Some kind of chaos. Is there really no method to manage this somehow?

Answer 1

No. Let him save. It's useless to mess around with it.

Answer 2

I stumbled upon your question by accident while looking for an answer.
The solution is simple :)

<form autocomplete="off">
   <input name="name" type="text">
   <input name="password" type="password" autocomplete="new-password"> // autocomplete="new-password" это решение для хрома
</form>

Answer 3

Found a solution that works. Add a hidden password field to the form.

<input type="password" 
       autocomplete="off" 
       name="passwordFake" 
       style="position:absolute; opacity: 0; filter: alpha(opacity = 0);"/>

What is the essence of the problem - Safari for autocomplete detects the input[type=password] fields and plays from them. To confuse it, you can add a hidden field and then it will be filled. Unfortunately, you will have to add such a fix to all forms where you want to avoid autocompletion.

Answer 4

somehow it was also necessary to cut off autocomplete for the browser, and all the dances with autocomplete did not give any result - the browser still diligently filled in the fields with the login and password ;
the option with autocomplete="new-password" seems to work too, although it may not work in all browsers
https://developer.mozilla.org/en-US/docs/Web/Secur...

Answer 5

Where are you autocomplete="off"? It should be on both the form and the elements.

Answer 6

Change the IDs and names of the fields/form as they are the same for you now. Change the path to the forms too. Change to something unintelligible.
Better yet, don't worry about it.

Answer 7

The problem was solved by simply adding a hidden text field after the required input. If the desired input has a class, add the same class to the hidden input.
<input type="text" style="display:none;">