I have a simple html form that allows a signed-in user to update their password. Originally, the form did not contain a username field. Because it did not contain a username, when Firefox would prompt the user to save their new password, the prompt would have a blank username field:
To fix this, I added a username field like in the example code below, populated the value with the current signed-in username before rendering the page, and hid the input with css (.visually-hidden has display:none;). This had the desired effect on Firefox and it now populates the username in the 'save password' prompt.
After this change, however, Chrome and Edge no longer prompt to save the user's password. Before the change, Chrome and Edge had worked as desired, and even somehow populated the username field in the prompts. After the change, no prompt shows to offer to save the changed password.
Does anyone have any ideas for what I should do to get the save password behavior working consistently between Firefox, Chrome, and Edge? I've tried un-hiding the username input, adding/removing autocomplete attributes, removing the pre-populated username value from the input, making the input type="email", but nothing has worked so far on Chrome (I didn't verify each attempt on Edge).
Thank you.
<form action="https://[example].com/password-confirm/" method="post" id="NewPasswordForm" name="NewPasswordForm" novalidate="novalidate">
<fieldset>
<input class="input-text visually-hidden" type="text" name="username" value="my_email#example.com" autocomplete="username email">
<div class="form-row required" aria-required="true">
<label for="dwfrm_resetpassword_password"><span class="error-icon"></span><span>New Password</span><span class="required-indicator">*</span></label>
<div class="field-wrapper">
<input class="input-text password required" type="password" id="dwfrm_resetpassword_password" name="dwfrm_resetpassword_password" value="" placeholder="" maxlength="255" minlength="6" aria-required="true" aria-invalid="false">
</div>
<div class="form-caption "></div>
</div>
<div class="form-row required" aria-required="true">
<label for="dwfrm_resetpassword_passwordconfirm"><span class="error-icon"></span><span>Verify Password</span><span class="required-indicator">*</span></label>
<div class="field-wrapper">
<input class="input-text password required" type="password" id="dwfrm_resetpassword_passwordconfirm" name="dwfrm_resetpassword_passwordconfirm" value="" placeholder="" maxlength="255" minlength="6" aria-required="true">
</div>
<div class="form-caption "></div>
</div>
<div class="form-row-button">
<button type="submit" class="apply" name="dwfrm_resetpassword_send" value="Apply">Update Password</button>
<a class="cancel" href="https://[example].com/preferences-summary/">Cancel</a>
</div>
</fieldset>
</form>
As you say it worked on Edge and Chrome before the change and worked on Firefox after the change, so I think you can apply the change for Firefox alone.
You can first detect if the browser is Firefox in JavaScript, if so then add the visually-hidden input. Then the input will only be added in Firefox and won't affect Edge/Chrome:
<fieldset>
<div id="invisible"></div>
...
</fieldset>
<script>
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
// Do Firefox-related activities
document.getElementById('invisible').innerHTML = '<input class="input-text visually-hidden" type="text" name="username" value="my_email#example.com" autocomplete="username email">';
}
</script>
Result in Firefox and Chrome:
Related
I maintain a login form that is reused across a variety of organizations. Each organization has a different set of required credentials. In some cases, only a single identifier is required. Essentially it's a user name or number, with no password. I realize this fact may strike many as odd, but let's leave that aside. It's a quirk of the domain I work in.
When the login form only contains a single input field I would still like browser's password management features to kick in and offer to save the entered value. I have tried setting autocomplete="username" on the input element as described here, but that does not seem to work.
Can this be done? Do any browsers support it? I can't find a clear answer in the documentation for Chrome, Firefox, or Safari. I can always implement it myself using a cookie and a "remember me" checkbox, but I would strongly prefer not to.
Include a hidden password input inside your form and set a non-empty value attribute such as "NULL" in the below example. Then the browser asks you for saving your credentials.
<form action="#" method="POST">
<input type="text" name="username" required>
<input type="password" name="password" value="NULL" hidden>
<input type="submit">
</form>
This is what I use:
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
You could try this make sure your code is some what similar...
I made some tests and figured out that it's possible to use the browser's login autocomplete also for a user only field.
You may use this code for the form and set the position for the password field only if you need to show only the username field (read more at the end of the post, it's needed for Firefox):
<?php
$passwordFieldPositionAway = '';
$hidePasswordField = false; // change this accordingly with your needs, e.g. for Firefox set it to true
if($hidePasswordField)
{
$passwordFieldPositionAway = " style='position:absolute;top:-1000px;'";
}
?>
<html>
<head>
</head>
<body>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name="username" autocomplete="username" placeholder="Username">
<input name="userPassword" type="password" <?= $passwordFieldPositionAway; ?> placeholder="password" autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
Tests I done
First, I modified the form suggested here.
index.php:
<html>
<head>
</head>
<body>
<form id="login" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' style='visibility: hidden; display:none;' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
login.php:
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
Chronium
Here are the steps I done with the Chronium browser:
At the first time I open the form, I insert my credentials:
The browser prompt the dialog to save the credentials:
The PHP page receives these values:
When I reopen the login page, the browser autofill both fields:
I make a login with different credentials:
When reopen the login page, Chronium auto-fills both fields with the latest login data:
About the second form, which have the password field hidden, the browser's behavior is the same as the first form:
and it prompt to save the login also for that form.
Firefox
Firefox behaves differently:
it prompt to save the login only if the password field:
isn't hidden (with no visibility:hidden nor display:none)
the password field contains at least 2 chars
It will auto-fill the field if there is only one login saved (in my case I had more logins), otherwise it leaves the selection to the user.
Therefore, to make the user-only login works on Firefox, you may show the password field and prefill it with any string you want. To hide it in Firefox you must position it outside of the user's visible area in the page:
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" style='position:absolute;top:-1000px;' placeholder='password' autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
Some info:
Chronium version: 77.0.3865.90 (Official Build) snap (a 64 bit)
Firefox version: 68.0.2 (64-bit)
Operative system: Ubuntu 18.04
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.
This has been bothering me for a few weeks now.
I have a login form that used to require username + password:
<form role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="username">Username</label>
<input id="username" name="username" type="text" placeholder="ex: AD\jdoe" required="required" autofocus="autofocus" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
I changed it to use the user's email instead due to reasons:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
Much to my surprise, Chrome was still auto-filling out the email field with the previously saved credentials. I tried a variety of permutations on the email field's attributes to no avail (also tried renaming the password field as well just in case, and that too still gets auto-filled). Firefox has the same behavior as well.
I also tried renaming the form itself, and adding a second form just to test wherein the browser filled in both sets of inputs.
Finally, exasperated, I came up with this workaround:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
<!-- Workaround for inability to clear the autocomplete functionality of a previously named field-->
<input id="username" type="text" name="username" class="hidden"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
The downside is that it won't save the user's email if they have previously saved credentials, and it continues to auto-fill the password (and the username too).
Of course, I can add some error to trigger to validate the field is an email and whatnot, but I'm more curious as to why this behavior is happening. It seems that short of removing the saved credentials in my own browser, I have no way to reset the auto-complete data for my users to prevent it from erroneously filling in the username into the email field.
What's kind of funny as well, since I set the new input to be of type email, it triggers the validation of the field and throws the browser's validation error saying the username is not a valid email (as expected).
I referenced this Stack Overflow question, which says:
It does not care what the field is called - just assumes the field before password is going to be your username.
This was what I was guessing to be the problem. Because your field is named password, it assumes that whatever comes before it is also related to login credentials (which is 100% time how it goes).
If you never want autocomplete on your login, that's the easier solution: simply disable autocomplete on the fields by using autocomplete="off" as an attribute on the fields. However, if you want to have the fields use autocomplete, just not the old data, that will prove to be a bit more difficult, and I don't know the full solution to this. The above article only makes mention of fully disabling autocomplete.
What might fix this (allowing autocomplete but not the old data) would be to use different input field names. Granted, I haven't tested this, but if you call your password field password2 and your username field username2 or something similar, and do not have a password input field, Chrome might detect it as being a different set of fields, and make its own, new association. Again though, I can't promise that this will work for you.
Not really a "fix" per se since it doesn't really handle it transparently as I was hoping, but, I opted to simply remove the workaround field and let my users deal with having their browser through a validation error when submitting the form.
Since the new field has type="email", when they try to submit the form it will validate the previously saved username as an invalid email and tell the user of such. The user will then change it to their email and hit submit again, at which point the browser will prompt them with the save login credentials message and all will be happy hence forth.
Not as clean as I'd have liked it, but it works and it'll be a one-time thing for users who had previously saved their username.
I have created a simple form in HTML which has two fields: Username and Password, and then a Log in button.
When I run the page in Chrome it fills the two fields with my XAMPP-phpmyadmin username and password into the fields and highlights them yellow.
How can I completely remove this so they are blank. Thanks
HTML form code:
<html>
<form action= "entryformlogon.php" method = "post" autocomplete="off">
Username: <input type="text" name="Username"><br>
Password: <input type="password" name="Password"><br>
<input type="submit" value="Log in">
</form>
</html>
autocomplete= "off" must be added to every input element. i.e.
<input type="text" name="Username" autocomplete="off">
Chrome it fills the two fields with my XAMPP-phpmyadmin username and password into the fields and highlights them yellow. How can I completely remove this so they are blank. #Charley Baker
This readonly-fix worked for me:
fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
By the way, some more information on Chrome and Safari auto fill behaviour:
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field. I guess, the Chrome and Safari look for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not directly control it, but the read-only trick above fixes it. :-)
For latest version of chrome
<input type="password" name="whatever" autocomplete="new-password" />
older version
<input type="password" name="whatever" autocomplete="false" />
or
<input type="password" name="whatever" autocomplete="off" />
Using autocomplete="off" on a password input is having this effect on the whole form not just the password field.
This wasn't the case in Safari 5.
Even adding autocomplete="on" to other fields in not working.
<form name="login" method="post" action="login.html" >
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Tried replicating the same on Safari 5.1.7.
I've set form's autocomplete as "on" and didn't make any addition to the password field (not explicitly setting password field's autocomplete "off"). Password field does not show an auto-completed suggestion, while the other fields work fine and shows auto-complete suggestions.
Please let me know in case you need any more explanation.
Following up on my comment:
Have you explicitly set autocomplete="on" at the form level while disabling it for the password? (from w3schools.com: http://www.w3schools.com/tags/att_input_autocomplete.asp )
<form name="login" method="post" action="login.html" autocomplete="on">
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Also confirm that it is not a browser stored username as password that is being auto-filled? (i.e. "Do you want Safari to remember these credentials?" - Not a big Safari users so not sure how it prompts / manages the credentials store.
try adding a '/' at the end of the password input tags
<input name="password" type="password" autocomplete="off"/>