I've had this weird situation just popup where I'm unable to use my mouse on a form I'm creating. It's requiring me to tab through the text fields. if I click on the second field it just pushes me back to the first field, i have to tab!
this is the form totally simple, it has something to do with the labels but I have never had issues before.
BTW: no JS or CSS in this form or page
my example:
<form>
<label for="username"*Username label>
<input type="text" name="username" tabindex="1" id="username">
<label for="password"*Password*label*>
<input type="password" name="password" tabindex="2" id="password">
<input type="submit" class="button" value="Login" name="submit" >
</form>
This is the proper way to format inputs with labels. This should fix your problem.
<label for="username">*Username*<input type="text" name="username" tabindex="1" id="username"/></label>
<label for="password">*Password*<input type="password" name="password" tabindex="2" id="password"/></label>
demo: http://jsfiddle.net/ZFZgt/
Related
I'm trying to disable the browser autocomplete on my Login form only after the user is being redirected from the reset password page.
I read many answers in SO but couldn't find something that worked for me.
I tried to set autocomplete="off" on the form tag, on each input but it didn't work.
I tried adding hidden fields as many suggested but it only works if I set on the fake password field the same name of the real password field - what of course I can't do.
That's the only way I got it to work:
<form id="login-form" method="post" action="/account/login">
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password" id="password_fake" value="" style="display:none;" />
<!-- ------- -->
<div class="inputField resetPasswordLogin login">
<input type="email" id="email" name="email" placeholder="USERNAME"/>
</div>
<div class="inputField resetPasswordLogin login">
<input type="password" id="password" name="password" placeholder="PASSWORD"/>
<input type="submit" class="hiddenSubmit" id="hiddenLogin"/>
</div>
</form>
It seems like this workaround works without having to set the same name in the password filed, any idea what can causes such a behavior?
This is what finally worked for me:
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_username" >
Password <input type="password" name="fake_password">
</div>
This is login form
<form method="post">
<input name="username" type="text" />
<input name="password" type="password" />
</form>
After login and save password by Browser, i go to users manage page
<form method="post">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="password" type="password" />
</form>
This page, browser show password and username by default to name and password
How fix it ?
https://i.stack.imgur.com/uniJY.jpg
https://i.stack.imgur.com/7ZbTJ.jpg
Use different names in input tag
How do you disable browser Autocomplete on web form field / input tag?
Used autocomplete attribute of tag.
read this link:https://www.w3schools.com/tags/att_form_autocomplete.asp
Autocomplete. autocomplete="off|on".
"When autocomplete is on, the browser automatically complete values based on values that the user has entered before." link
<form method="post" autocomplete="on">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="psw" type="password" />
</form>
You shouls also use different input names.
Here is the code :
<form method="post" action="default.aspx" id="form1" autocomplete="off">
<div class="loginContnet">
<input " name="SC_Login1$txtUserCode" type="text" id="SC_Login1_txtUserCode" class="txtUserCode" autocomplete="off">
<input name="SC_Login1$txtPassword" type="password" id="SC_Login1_txtPassword" class="txtPassword" autocomplete="off">
<input type="submit" name="SC_Login1$btnOK" value="OK" id="SC_Login1_btnOK" class="btnOK">
</div>
</form>
Why all browsers except Mozilla ask save password and how to prevent that?
Indeed, browsers do not give a shit about autocomplete="off" attribute for password saving / restoration.
I did encounter the same problem recently and solved it with a nice shiny and beautiful hack as you can see below. The trick consists in having two fields corresponding to login and password with display: none;, hence the browser believe it is the actual login and password fields! Haha, stupid browser!
<form>
<input type="text" id="email" name="email" size="40" autocomplete="off" />
<input type="text" style="display: none;" name="loginForAutoCompleteDisable" />
<input type="password" style="display: none;" name="passwordForAutoCompleteDisable" />
<input type="password" id="password" name="password" autocomplete="off" />
</form>
Hope this helped!
autocomplete=off only tells the browser not to show suggestions based on your browsing history.
It has nothing to do with save-password
as far as I know, the autocomplete-attribute is used for showing suggestions based on your prior entered values. it has nothing to do with the "save-password"-question. I dont think you can disable the "save-password"-question by html, because it's up to every single client.
The only problem using this attribute is that it is not standard
(it works in IE and Mozilla browsers).
Answer to this question
<form method="post" action="default.aspx" id="form1" autocomplete="off">
<div class="loginContnet">
<input name="SC_Login1$txtUserCode" type="text" id="SC_Login1_txtUserCode" class="txtUserCode" autocomplete="off">
<input name="SC_Login1$txtPassword" type="password" id="SC_Login1_txtPassword" class="txtPassword" autocomplete="off">
<input type="submit" name="SC_Login1$btnOK" value="OK" id="SC_Login1_btnOK" class="btnOK">
</div>
</form>
My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.
On many websites when you login via Chrome it will offer to remember your login details.
I have a login form and this does not happen.
Here's the form:
<form action="/login" method="post">
<label for="username">Email Address:</label>
<input id="username" name="username" autofocus="autofocus" required="required" type="email" size="25" autocomplete="off"/>
<label for="password">Password:</label>
<input id="password" name="password" required="required" type="password" size="25" autocomplete="off"/>
<input type="submit" value="Login">
</form>
I'm assuming there must be some variable or header that needs setting to do this.
Does anyone know how its done?
I removed the autocomplete parameters from the form and now Chrome can store username and password here.