Safari 6 - autocomplete affecting whole form - html

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"/>

Related

How can I activate the Google Chrome password generator for my password input field?

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

Chrome stores the new password but does not link it to the current username: how can I fix it?

In a website I have created a page to change the user's password to a new one. Obviously, the current username does not need to be typed again by the user therefore there is no input field for the username.
Of course, Chrome understands that this is a new password and suggests to save it but it cannot find out what the username is.
I tried like this:
<input id="psw" name="psw" type="password" autocomplete="new-password">
<input id="psw_confirm" name="psw_confirm" type="password" autocomplete="new-password">
and like this:
<input id="usr" name="usr" type="hidden" value="username" autocomplete="username">
<input id="psw" name="psw" type="password" autocomplete="new-password">
<input id="psw_confirm" name="psw_confirm" type="password" autocomplete="new-password">
to no avail.
How should I indicate the current username in a way the browser can understand properly?
Unfortunately, I don't think that <input type="hidden" /> will trigger Chrome password manager, as it's designed to catch type='text' inputs only. That said, you should be fine using a standard text input with the display:none css property set:
<input id="usr" name="usr" type="text"
value="username" style="display: none;" />
I also think that your scenario (password change) is not an ideal one for the autocompletion feature, therefore I would also switch that attribute off (it won't affect the Chrome password manager).
Here's a jsfiddle with a working sample.

Safari overwriting email and password fields on an edit user form

I have an edit-user form:
<form method="post" action="index.php" />
Email:
<input type="text" name="email" value="user#domain.com" />
Password:
<input type="password" name="password" value="thesavedpassword" />
</form>
Safari overwrites my pre-filled username and password for me, so I added all the autocomplete options - this didn't work.
Reading on here, I hear that readonly has worked for some, so I tried that too, but that still doesn't work. Here is what the code looks like with all that in:
<form method="post" action="index.php" autocomplete="off" />
Email:
<input type="text" name="email" value="user#domain.com"
autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
Password:
<input type="password" name="password" value="thesavedpassword"
readonly autocomplete="off" onfocus="this.removeAttribute('readonly');" />
</form>
I'm really not sure where to go from here! Why would Safari overwrite fields that are already filled in?
Many thanks in advance!
The password management engine will kick in as soon as it detects a password field and once it has, it will look for the nearest text field before the password field and assume that one to be a username field.
The autocomplete attribute is ignored by most browsers but I have read that setting it to "false" rather than "off" has worked for some (not me).
There is no clean solution to this. The only thing that has worked for me is to introduce hidden dummy fields for safari to populate.

Input fields not working properly

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.

Remove Chrome autofill for HTML forms

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" />