EDIT: I had CSS code that prevented the <br> tag from inserting a single line break
I've been trying to create a login page, and I wanted to center the Username inserting block and the Password inserting block, I have used the tag to accomplish that, but it doesn't work; see screenshot. Any help is appreciated, thank you
here is the code:
<div class="login">
<form action="#">
<label for="username">Username: </label>
<input type="text" name="username"><br/>
<label for="password">Password: </label>
<input type="password" name="password"><br/>
<input type="submit" name="submit" value="LOGIN">
</form>
</div>
here's how the code renders
<div class="login">
<form action="#">
<label for="username">Username: </label>
<input type="text" name="username"><br/><br/>
<label for="password">Password: </label>
<input type="password" name="password"><br/><br/>
<input type="submit" name="submit" value="LOGIN">
</form>
</div>
try this
Related
So I wanted to make a form of login to a website and this is my code.
<form method="post" class="form">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
But I cant figure out how to go to other page when I click the Login input. I tried to add href="", but it didnt work because its not an <a> element.
Simply add action="yourPage.html" in your form div.
<form method="post" class="form" action="yourPage.html">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" value="Login">
input class is declared.
the problem is the even though the button is clickable,i cant get it to open new_url.
You forgot to mention input type submit.
try below code
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
</div>
Use <input type="submit" value="Login">
instead of
<input type="button" value="Login">
You just need to add one more input value
<input type="Submit" value="login">
I am trying out the following three examples from the O'Reilly book
Bootstrap by Jake Spurlock. When I paste the code into JSFiddle
it highlights an error in red, presumably because embedding a checkbox
input element inside a label element does not produce valid HTML.
<!-- First example from book's Bootstrap CSS -> Forms section: -->
<form>
<fieldset>
<legend>Legend</legend>
<label for="name">Label name</label>
<input type="text" id="name" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox" for="checkbox">
<input type="checkbox" id="checkbox">
Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
<!-- Second example from book's Bootstrap CSS -> Forms section: -->
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
<!-- Third example from book's Bootstrap CSS -> Forms section: -->
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
In particular in all three cases the code that causes the HTML error is the following:
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
The following related post seems to deal with the same problem
but the code in the answer doesn't seem to fix the HTML problem I describe.
So what is the correct way to style the form in bootstrap so that the html
is valid, and so that the browser properly displays the checkbox followed
by the checkbox text on a single line by itself? I would prefer an answer
that does not require creating any custom CSS.
For the class for label should be control-label, checkbox is not valid
<div>
<label class="control-label">
<input type="checkbox">
Remember me
</label>
</div>
<button type="submit" class="btn">Submit</button>
I'm trying to get our login portal working, but for some reason it won't accept the login details. It just won't submit the information, it just refreshes the page.
Any ideas would be extremely appreciated on how to fix this.
Many thanks!
<div id="nav">
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log In <span>▼</span>
</a>
<div id="login-content">
<form>
<form action="https://na6.salesforce.com/secur/login_portal.jsp" method="POST">
<input type="hidden" value="00D80000000anEa" name="orgId">
<input type="hidden" value="060800000006ANB" name="portalId">
<input type="hidden" value="true" name="useSecure">
<input type="hidden" value="2" name="loginType">
<input type="hidden" name="action" value="loginAction">
<fieldset id="inputs">
<input id="txtUserIdGutter" class="InputText" type="text" name="Email" placeholder="Your email address" required>
<input id="txtPasswordGutter" class="InputText" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
<label>Forgot Password?</label>
</fieldset>
</form>
</div>
</li>
</ul>
</div>
Take out your extra <form> tag.
<div id="login-content">
<!-- Remove this line: --> <form>
<form action="https://na6.salesforce.com/secur/login_portal.jsp" method="POST">
When the page refreshes, it's supposed to hit your code behind.
Do you have a log line or a breakpoint that you expect your code to be called?
Also, you have double form tags:
<form><form action="https://na6.salesforce....
Try to remove the first one.
I have a a page with two forms on it. I can only click inside the input boxes of one form. For the other form, I can select the input boxes but only if I use tab. Is there anyway I can fix this? The site is http://login.peakperformancecct.com/. Just for reference, here is my code:
<div class="login">
<h1>Email Login</h1>
<form name="emaillogin" id="loginform" action="http://www.nspirelab.com:2095/login" method="POST">
<p>
<label for="user">Email Address<br />
<input class="input" id="user" name="user" type="text" value="" size="20" /></label>
</p>
<p>
<label for="pass">Password<br />
<input id="pass" name="pass" class="input" type="password" size="20" /></label>
</p>
<p class="submit">
<input type="submit" class="button-primary" value="Log In" />
</p>
</form>
</div>
<div class="login">
<h1>Site Login</h1>
<form name="sitelogin" id="loginform" action="http://peakperformancecct.com/wp-login.php" method="post">
<p>
<label for="user">Username<br />
<input class="input" type="text" name="log" id="log" value="" size="20" /></label>
</p>
<p>
<label for="pass">Password<br />
<input class="input" type="password" name="pwd" id="pwd" size="20" /></label>
</p>
<p class="submit">
<input type="submit" name="submit" value="Log In" class="button-primary" />
</p>
</form>
</div>
Validate, validate, validate.
Your labels in the second form are for the inputs in the first form.
Clicking on the label sends the focus to the input with which it is associated
(Since the inputs are inside the labels, so you can't click on the input without clicking on the label too).