I've added two input fields to my site, one for the username and one for the password to log in to.
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
However, the two fields are already filled out with information I use to log in to a completely different website. How can I make sure that this doesn't happen to other users?
If your not using chrome, value="" should work.
input type="text" class="form-control" value="">
You need to do the same for password and username.
Related
I'm currently designing my first website for fun and I'm trying to use a login system.
So far I have managed to design a login system below is the HTML file.
<body>
<h2>Login Form (Coach only) </h2>
<form action="database.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
Currently, it will accept anything that is typed in. Can anyone help with how to set the username and password to one thing? Would it be using PHP?
This is just the front end what you've done. Now you will have to create a database.php since you've used it as form action and also create a database to store the values.
in the database.php first connect it to database and then use insert query and then use validations to check if database values match with the entered values.
I have a web app (JSP, Spring, Tomcat) and after the user is logged in, they can click a "Change Password" link which prompts them with a simple form with "Password" and "Confirm Password" fields.
<div class="form-group">
<label class="control-label col-sm-2">New Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Confirm New Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>
Works fine, except the browser thinks this is a login form and prompts the user if they want to save the password in the browser.
My understanding is autocomplete="off" was intended to prevent the prompting, but modern browsers ignore that field.
Alternately, is there some way to use type="text" and still have the characters displayed as masked bullet characters?
The valid options for autocomplete are on and off, not true/false.
In new versions of Chrome the way you described does not work. Try this:
<input type="password" name="password" autocomplete="user-password">
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>
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/
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.