Browser save password show in wrong input - html

This is login form
<form method="post">
<input name="username" type="text" />
<input name="password" type="password" />
</form>
After login and save password by Browser, i go to users manage page
<form method="post">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="password" type="password" />
</form>
This page, browser show password and username by default to name and password
How fix it ?
https://i.stack.imgur.com/uniJY.jpg
https://i.stack.imgur.com/7ZbTJ.jpg

Use different names in input tag
How do you disable browser Autocomplete on web form field / input tag?

Used autocomplete attribute of tag.
read this link:https://www.w3schools.com/tags/att_form_autocomplete.asp

Autocomplete. autocomplete="off|on".
"When autocomplete is on, the browser automatically complete values based on values that the user has entered before." link
<form method="post" autocomplete="on">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="psw" type="password" />
</form>
You shouls also use different input names.

Related

Why isn't the browser autocompleting the whole HTML Form?

I have an HTML form with 3 simple inputs and a submit button like this:
<form action="foo.php" method="post" id="form" name="form" target="_blank" autocomplete="on">
<input type="text" value="" name="firstname" id="firstname" placeholder="First Name" autocomplete="firstname" />
<input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" autocomplete="lastname" />
<input type="email" value="" name="email" id="email" placeholder="Email Address" autocomplete="email" />
<input type="submit" value="Submit" name="send" />
</form>
When I click on the First Name input though and select the First Name to auto-complete, the browser doesn't complete the rest of the form (Last Name and Email). Using the Latest Chrome build: 90.0.44
Is that an expected behavior? How can I make the browser to autofill the whole form?
There is a description of autocomplete attributes here. MDN web docs - autocomplete.
"given-name"
The given (or "first") name.
"family-name"
The family (or "last") name.
email is the correct identifier for it tho. try correcting the others and see if that works for you.

Disable browser Autocomplete with fake fields doesn't work

I'm trying to disable the browser autocomplete on my Login form only after the user is being redirected from the reset password page.
I read many answers in SO but couldn't find something that worked for me.
I tried to set autocomplete="off" on the form tag, on each input but it didn't work.
I tried adding hidden fields as many suggested but it only works if I set on the fake password field the same name of the real password field - what of course I can't do.
That's the only way I got it to work:
<form id="login-form" method="post" action="/account/login">
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password" id="password_fake" value="" style="display:none;" />
<!-- ------- -->
<div class="inputField resetPasswordLogin login">
<input type="email" id="email" name="email" placeholder="USERNAME"/>
</div>
<div class="inputField resetPasswordLogin login">
<input type="password" id="password" name="password" placeholder="PASSWORD"/>
<input type="submit" class="hiddenSubmit" id="hiddenLogin"/>
</div>
</form>
It seems like this workaround works without having to set the same name in the password filed, any idea what can causes such a behavior?
This is what finally worked for me:
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_username" >
Password <input type="password" name="fake_password">
</div>

Safari Autofill: Trigger password suggestions in Devise registration form

I have a very standard Rails 4 Application using Devise 3
I want to have the registration form to trigger password suggestions in the current (Mavericks) version of Safari:
iCloud Keychain is enabled and I get suggestions on other pages, just my form does not work with that for some reason.
I can't seem to figure out what exactly it takes to enable suggestions.
Here is the form that devise generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="SKtqmi1L/BKcTE/Hvlvw1H3ZRH8nd2UNiNnVILuLS/E=" />
</div>
<div>
<label for="user_email">Email</label><br />
<input autofocus="autofocus" id="user_email" name="user[email]" type="email" value="" />
</div>
<div>
<label for="user_password">Password</label><br />
<input id="user_password" name="user[password]" type="password" />
</div>
<div>
<label for="user_password_confirmation">Password confirmation</label><br />
<input id="user_password_confirmation" name="user[password_confirmation]" type="password" />
</div>
<div><input name="commit" type="submit" value="Sign up" /></div>
</form>
How do I need to change the form to trigger password suggestions
are there any usable documentation anywhere about that feature?
Apple accepts new autocomplete properties: current-password and new-password
I had the same issue with my site which is dedicated to password generation test cases to improve password generators.
As outlined in a [PDF] guide made by Apple the autocomplete property now accepts set values to help with this issue.
See the spec here along with other valid values: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password
<form method="post" action="/tests/4/register-submit" >
<label>
<div>Name</div>
<input
name="name"
placeholder="name"
autocomplete="name"
type="text"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Username</div>
<input
name="username"
placeholder="Username"
type="text"
autocomplete="username"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Password</div>
<input
name="password"
placeholder="Password"
type="password"
autocomplete="new-password"
required
/>
</label>
<input type="submit" value="Register" />
</form>
That code works due to the autocomplete="new-password" property used. autocomplete="current-password" is also possible for login forms.
This has been tested as working by the very helpful: #simevidas
I've tested your code, and it successfully suggested a password. So you have a problem other than your HTML.
Ensure the following are true:
Your server is properly outputting your web page as HTML content, with response code 200. (You can see this using any browser's developer tools.)
You're on the latest version of Safari (7.+)
AutoFill usernames and passwords is checked in Safari > Preferences > Passwords.
Try removing all saved passwords for your domain in Safari.
You have Keychain checked On in iCloud (System Preferences > iCloud)
Maybe adding an autocomplete="on" attribute to the form or input-tag works.
http://www.w3schools.com/HTML/html5_form_attributes.asp

No 'Save Password' Prompt by any browser for my form

My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.

How to get Chrome to remember login on forms?

On many websites when you login via Chrome it will offer to remember your login details.
I have a login form and this does not happen.
Here's the form:
<form action="/login" method="post">
<label for="username">Email Address:</label>
<input id="username" name="username" autofocus="autofocus" required="required" type="email" size="25" autocomplete="off"/>
<label for="password">Password:</label>
<input id="password" name="password" required="required" type="password" size="25" autocomplete="off"/>
<input type="submit" value="Login">
</form>
I'm assuming there must be some variable or header that needs setting to do this.
Does anyone know how its done?
I removed the autocomplete parameters from the form and now Chrome can store username and password here.