Won't submit login details - html

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.

Related

<br> element not working between label and input

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

Go to Other Page When Form Input Element Is Clicked

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>

Moving some fields from the form to the right

So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.

IE10 - hover triggers unwanted :hover event

In the jsfiddle included below, there are two hover forms in the footer. When you hover over "login", the login form appears as expected. However, hover over the username input box, and the registration form appears. Also, hover over "register" in the footer, and the registration form appears as expected. However, move the mouse over the "Username" label, and the login form displays.
I'm only getting this error in Internet Explorer (I'm using version 10). Chrome and FireFox have been tested. When I go into compatibility view in IE, I no longer have this problem.
http://jsfiddle.net/LcPqR/4/
<body>
<div id="header">
</div>
<div id="middle">
<div id="content">
</div><!--/content-->
</div><!--/middle-->
<div id="footer">
<ul id="footer_row">
<li>login
<ul>
<li ><form name="loginForm" action="redirect.php" method="post">
<label for="inputUser">Username</label> <input id="inputUser" type="text" name="user" maxlength="30" />
<label for="inputPass">Password</label> <input id="inputPass" type="password" name="pass" maxlength="254" />
<input type="checkbox" name="remember" value="yes"> <label for="chkRemember" />Stay signed in</label>
<input type="submit" class="submit-form" value="Submit" />
</form>
</li>
</ul>
</li>
<li>register
<ul>
<li ><form name="registerForm" action="register.php" method="post">
<label for="inputUser" >Username</label> <input id="inputUser" type="text" name="user" maxlength="30" />
<label for="inputEmail" >E-Mail Address</label> <input id="inputEmail" type="text" name="email" maxlength="254" />
<label for="inputPass1" >Password</label> <input id="inputPass1" type="password" name="pass1" maxlength="254" />
<label for="inputPass2" >Password (again)</label> <input id="inputPass2" type="password" name="pass2" maxlength="254" />
<input class="submit-form" type="submit" value="Submit" />
</form>
</li>
</ul>
</li></ul>
</div>
</body>

Two html forms on one page; Can only select second form fields with tab

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).