I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.
Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?
2015-10-29 -- here's the markup:
<form autocomplete="off" method="post" role="form">
<div class="form-group">
<input name="formSubmitted" type="hidden" value="1">
</div>
<div class="form-group">
<label for="username">Username</label>
<input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
</div>
<div class="form-group">
<label for="password">Password</label>
<input autocomplete="off" class="form-control" id="password" name="password" required type="password">
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
Use autocomplete="new-password"
Works a charm!
Use the autocomplete="off" attribute on the <form> or <input>.
from MDN:
autocomplete
This attribute indicates whether the value of the control can be
automatically completed by the browser.
off The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method;
the browser does not automatically complete the entry.
on The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...
Also from MDN, see: How to Turn Off Form Autocompletion
Also see:
Chrome Browser Ignoring AutoComplete=Off
"AutoComplete=Off" not working on Google Chrome Browser
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
Related
I am having an issue while using the autocomplete="current-password" where the form is not showing the current password. The password is saved in Chrome. The input is wrapped in a form. Is anyone having issues with autocomplete="current-password" not working for them?
here is my input for React:
<input
type={this.state.visible ? `text` : `password`}
onChange={(e) => this.props.onChange('password', e.target.value)}
autoComplete="current-password"
placeholder="password"
/>
I have not seen any reference to this not working or anyone mentioning this not working.
note: autoComplete must be spelled this way in React as react does not recognize the attribute as autocomplete but renders on the DOM as autocomplete
here is how the element is rendering on the DOM:
<form class="sign-in">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="achroma#gmail.com" autocomplete="username" name="email" value="">
</div>
<div class="input-group">
<div class="password-top">
<label>Password</label>
<span class="password-toggle">show password</span>
</div>
<input type="password" autocomplete="current-password" placeholder="password">
<span class="forgot-password">Forgot Password?</span>
</div>
</form>
Your resulting HTML lacks name="password" at least.
Also, currently Chrome doesn't suggest password auto-fill for localhost. I had to turn back on auto-sign-in in Chrome settings, since my Chrome didn't suggest password auto-fills on any sites. Hope it helps.
I've tested your code in a clean react project, just added name="password" to the password input, and used a proxy to my machine. It seems to work in Chrome.
I have an HTML form Which Contains the Various Field.
Simply We all Know that every browser will show some suggestion for the input field.
Like an Email Input field. When you enter or click on that input it shows the previously entered email or any other values.
I have cleared and done all procedures for stopping that behavior. But still, I get previously entered data in the input field. (as in shown in image)
So how do I remove that suggestion or previously entered data?
Or How do I prevent that automatic suggestion for the input field?
This is my HTML Sample Code for Input Field.
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="email" name="email" id="login_email" required placeholder="User Email" data-parsley-type="email">
</div>
</div>
See this
I have added the
autocomplete="off"
In Your code. Try it.
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="email" name="email" id="login_email" required placeholder="User Email" data-parsley-type="email" autocomplete="off">
</div>
</div>
You can set
<input type="text" name="email" autocomplete="off" />
And some browsers like Firefox 3.0.X may still show cached objects so you can set your <form> tag with autocomplete="off".
For more detailed answers, please visit
How do you disable browser Autocomplete on web form field / input tag?
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.
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.
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.