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.
Related
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
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 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.
I have a very standard Rails 4 Application using Devise 3
I want to have the registration form to trigger password suggestions in the current (Mavericks) version of Safari:
iCloud Keychain is enabled and I get suggestions on other pages, just my form does not work with that for some reason.
I can't seem to figure out what exactly it takes to enable suggestions.
Here is the form that devise generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="SKtqmi1L/BKcTE/Hvlvw1H3ZRH8nd2UNiNnVILuLS/E=" />
</div>
<div>
<label for="user_email">Email</label><br />
<input autofocus="autofocus" id="user_email" name="user[email]" type="email" value="" />
</div>
<div>
<label for="user_password">Password</label><br />
<input id="user_password" name="user[password]" type="password" />
</div>
<div>
<label for="user_password_confirmation">Password confirmation</label><br />
<input id="user_password_confirmation" name="user[password_confirmation]" type="password" />
</div>
<div><input name="commit" type="submit" value="Sign up" /></div>
</form>
How do I need to change the form to trigger password suggestions
are there any usable documentation anywhere about that feature?
Apple accepts new autocomplete properties: current-password and new-password
I had the same issue with my site which is dedicated to password generation test cases to improve password generators.
As outlined in a [PDF] guide made by Apple the autocomplete property now accepts set values to help with this issue.
See the spec here along with other valid values: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password
<form method="post" action="/tests/4/register-submit" >
<label>
<div>Name</div>
<input
name="name"
placeholder="name"
autocomplete="name"
type="text"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Username</div>
<input
name="username"
placeholder="Username"
type="text"
autocomplete="username"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Password</div>
<input
name="password"
placeholder="Password"
type="password"
autocomplete="new-password"
required
/>
</label>
<input type="submit" value="Register" />
</form>
That code works due to the autocomplete="new-password" property used. autocomplete="current-password" is also possible for login forms.
This has been tested as working by the very helpful: #simevidas
I've tested your code, and it successfully suggested a password. So you have a problem other than your HTML.
Ensure the following are true:
Your server is properly outputting your web page as HTML content, with response code 200. (You can see this using any browser's developer tools.)
You're on the latest version of Safari (7.+)
AutoFill usernames and passwords is checked in Safari > Preferences > Passwords.
Try removing all saved passwords for your domain in Safari.
You have Keychain checked On in iCloud (System Preferences > iCloud)
Maybe adding an autocomplete="on" attribute to the form or input-tag works.
http://www.w3schools.com/HTML/html5_form_attributes.asp
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.