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
Related
I have noticed on some websites google is asking me if i want to use a password generated by Chrome.
It doesnt happen with my own input field.
How can i make this work?
EXAMPLE
Based on chromium; this should work : (the suggest password comes after already known passwords for that site)
<form id="login" action="signup.php" method="post">
<input type="text" autocomplete="username">
<input type="password" autocomplete="new-password">
<input type="password" autocomplete="new-password">
<input type="submit" value="Sign Up!">
</form>
more examples : https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
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.
OK so I have a login page. And the browsers put the username/password there, if I chose to save these credentials.
Problem is that inside the website, I have an "AddUser" view, and it also auto-completes there the user/pass fields.
This is really up to the browser. It doesn't happen on the server side. You can politely ask the browser to not save data for autocomplete by adding the autocomplete="off" attribute to your form tag. Something like this:
<form id="frmLogin" action="/login/" method="post" autocomplete="off">
If you can't do that for some reason, you can use jQuery to add the attribute in code:
$('#frmLogin').attr('autocomplete', 'off');
If asking nicely isn't working, you can try to trick the browser:
<form id="frmLogin" action="/login/" method="post" autocomplete="off">
<div style="visibility:collapse;">
<input type="password"/>
</div>
<input type="text" name="username" />
<input type="password" name="password" />
</form>
The hidden div has a dummy password field which should come before the real password field.
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"/>
I have a form on a page that is shown via https:// as follows:
<form id="memberslogin_form" name="memberslogin_form">
<fieldset>
<legend>Login</legend>
<div>
<label for="membershipId">Membership number</label>
<input type="text" class="field" name="membershipId" id="membershipId""/>
</div>
<div>
<label for="memberPassword">Password</label>
<input size="18" type="password" class="field" maxlength="50" name="memberPassword" id="memberPassword" />
</div>
<div id="button_login">
<input type="button" value="Login" class="button" id="signin" name="signin"/>
</div>
</fieldset>
</form>
The form is uniquely named, as are the inputs.
However, successful logins do not cause the "membershipId" entries to be listed in the input recent entries \ history. This occurs in both FF3.6 and IE6+.
I believe the ability to store field history is browser-based via it's settings, but I cannot retain the input history over https:// forms?
Is this a typo in here only, or in actual page:
<input type="text" class="field" name="membershipId" id="membershipId""/>
See the extra ".
I don't know much about the mechanism of saving form value in FF, but all this time, my form input is saved even if it in https site.
Maybe you can try lastpass that can save a form input for later usage as well as the password securely.