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>
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>
I'm trying to create a two column form in HTML using the below code.
<div id="form-wrapper">
<form class="contact_form" action="" method="post" name="contact_form">
<ul>
<div id="form_left">
<li>
<span class="required_field"> * Denotes a required field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
</li>
<li>
<label for="telephone">Contact Number:</label>
<input type="tel" name="telephone" placeholder="(01225) 123456">
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email address" placeholder="example#example.com">
</li>
</div>
<div id="form_right">
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" >
</li>
</div>
</ul>
</form>
</div>
(http://jsfiddle.net/qrttZ/)
But for some reason, it is showing the bottom half of my HTML code inside of the text area window.
I can't see any open tags so i'n not sure why this is.
The fact that HTML doesn't need the XHTML self closing short tags, e.g. <input /> means it's very easy for rookies to make this mistake as textarea performs a very similar purpose. It's just that for a very good reason it needs closing.
<textarea name="message" cols="40" rows="6" ></textarea>
...
That done, this
<ul>
<div id="form_left">
<li>
is bad. <li> show follow <ul> there should not be a <div> there.
Also
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
Without an id in the input, that for is useless.
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="John Doe">
But if you're going to use a label with no markup between it and the input and if you're not styling it
<label>Name: <input type="text" name="name" placeholder="John Doe"></label>
is less to output
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).
"The for attribute of the label element must refer to a form control."
Honestly, I don't understand what's wrong with the markup. I've looked through so much of the W3's site and just can't get it.
Help?
HTML:
<form action="process.php" method="post">
<div>
<label for="name">Name</label><br />
<input type="text" value="" name="name" />
</div>
<div>
<label for="email">E-mail</label><br />
<input type="text" value="" name="email" />
</div>
<div>
<label for="message">Message</label><br />
<textarea name="message" cols="30" rows="4"></textarea>
</div>
<div>
<input type="checkbox" value="yes" name="newsletter" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div>
<input type="submit" value="Submit" name="subscribe" />
</div>
</form>
You're missing the id attribute.
So to fix it, for example:
<input type="text" value="" name="email" id="email" />
That's it. Linky.
Thirtydot is correct; there is amissing id in your form. I have added all.
Check this:
<form action="process.php" method="post">
<div>
<label for="name">Name</label><br />
<input type="text" id="name" value="" name="name" />
</div>
<div>
<label for="email">E-mail</label><br />
<input type="text" id="email" value="" name="email" />
</div>
<div>
<label for="message">Message</label><br />
<textarea name="message" id="message" cols="30" rows="4"></textarea>
</div>
<div>
<input type="checkbox" id="newsletter" value="yes" name="newsletter" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div>
<input type="submit" value="Submit" name="subscribe" />
</div>
</form>