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" />
Related
How To Preventing Browser Text Input Suggestions from browser cookie, autocomplete="off" and others are not work.. Chrome Version : 2021 chrome version 88.0.4324.190
readonly is work for autofill its work proper, but autosuggestion is not.
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;" autocomplete="off">
<input type="password" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password">
what you want is here
change type="password" to type="text" and used in your input
-webkit-text-security: disc !important;
<input type="text" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password" style="-webkit-text-security: disc !important;">
The only thing that still works in Chrome is creating random name not related to the field. Like autocomplete="new-password" to password field name.
Seems to be wrong, but it's a workaround.
So for your field named email, try to put autocomplete="new-email".
Even as stated as working in the SO below, autocomplete="off" still buggy:
Disabling Chrome Autofill
Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.
You need to keep in mind that's a feature from the Password Manager.
This is correctly stated here by Mozilla:
Preventing autofilling with autocomplete="new-password"
And why it's not always possible to prevent:
Browser compatibility
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
Solution #1:
As you can see, the autosuggestion show From this website.
As workaround, you need to change the fieldname from name="email" to something else, like name="user-email".
And handle the change inside your server logic.
Again in your server logic, generate a random name every time page is shown, like a UUID autocomplete="c821c4f0-7be8-11eb-9439-0242ac130002"
Solution #2:
Replace the input kind type="email" to type="text".
html:
<input type="text" class="form-control" id="user-email" name="user-email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" />
javascript:
window.onload = function () {
init();
}
function init() {
let x = document.getElementById("user-email");
if (x) x.setAttribute("type", "email");
}
Solution #3:
Add hidden fields before the real one:
HTML - Disable Password Manager
PS: Don't forget to place autocomplete="off" on the form which field belongs
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:
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.
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.
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"/>