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.
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 can find a lot of references even on StackOverflow that Chrome Auto-fill functionality should work if autocomplete="on".
However that does not seem to be the case with the latest Chrome I have here (60.0.3112.90). To be precise - default browser autocomplete works fine , but Auto-fill will ignore the field completely.
The code below won't work with Chrome Auto-fill:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="on" />
<input type="text" name="email" autocomplete="on" />
</form>
However, this will work without issues:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="given-name" />
<input type="text" name="email" autocomplete="email" />
</form>
You can easily test it here: https://jsfiddle.net/kw4yjpz4/
Screenshots:
Does it mean that all input fields now have to have autocomplete="[NAME]" for auto-fill to work? Is this a bug in the newest Chrome or intended behaviour?
I stumbled across this same issue and searching led me here... I moved on not finding an answer and finally stumbled across the answer to my cause of the issue, so I came back in case someone like me wanders through with the same issue (likely myself in 2 years when I've forgotten about it - hi, me!).
Turns out if the site does not have a valid SSL cert, Chrome Autofill does not work.
Try the following:
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<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>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
The above works as I want in Chrome when the site has a valid SSL cert. Saving locally and opening the .html results in Autofill not working.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
And It contains only on|off Value for 'autocomplete' attribute.
In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)
autocomplete works once you submit the data see
https://jsfiddle.net/0x31Loo1/#&togetherjs=CtJMLzM7AP
<form method="post" name="checkout" url="/" autocomplete="on">
<input type="text" name="given-name" />
<input type="text" name="email" />
<input type="submit">
</form>
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.
i am bit confused about the code..This is login.php file..and action of the form is also in the same file.Can this happen? if,then same login form should open if user submit the form...i am making my website,where i want to use login/register form.
<form action="login.php" method="post" class="f-wrap-1">
<div class="req">
Not Registered?<br />
Forgot your Password?
</div>
<fieldset>
<h3>Member Login</h3>
<label for="firstname"><b>Username:</b>
<input id="username" name="username" type="text" class="f-name" autocomplete="on" tabindex="1" /><br />
</label>
<label for="password"><b>Password:</b>
<input id="password" name="password" type="password" class="f-name" autocomplete="off" tabindex="2" /><br />
</label>
<label for="code"><b>Security Code:</b>
<input id="code" name="code" type="text" class="f-name" autocomplete="off" tabindex="3" /><br />
</label>
<label for="code2"><b> </b>
<img src="image.php?" /><br />
</label>
<div class="f-submit-wrap">
<input type="submit" value="Submit" class="f-submit" tabindex="4" /><br />
</div>
</fieldset>
</form>
This is login.php file..and action of the form is also in the same file.Can this happen?
Yes
if,then same login form should open if user submit the form
Not necessarily. In a system like this, the form data will be processed by server side code. The logic will probably be something like:
If it is a GET request, send the browser the form.
Otherwise, if it is a POST request, then check the form data:
If it is valid login data, then: set a cookie to track the user and
tell the browser to get some other URL.
Otherwise, the login data is wrong: populate the form with an error message
and possibly default the values of the fields to the wrong data the user
entered, then send the form to the browser.
Populating the form with the invalid data doesn't make much sense in a login form like this one, but it more useful in (for example) a registration form.
Who wants to retype all their personal data again just because the username they wanted is not available or they missed a field?
It's possible to send form to same file but it's not in good style. You would have to check if post data is available and display proper view based on that.
Better way to do it is just change the action of the form to point to another file and in that file handle login logic.
<form action="file.php" method="post" class="f-wrap-1">
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"/>