It seems that my html login form supports "remember password" in ff but not in ie and chrome. Can anybody tell me why? Here's the code:
<form name="login_form" id="login_form" action="" method="POST">
<div class="login_line">name<input name="user_name" id="user_name_id" size="16" maxlength="16" value="" type="text"></div>
<div class="login_line">password<input name="password" id="password_id" size="16" maxlength="16" type="password"></div>
<div class="login_line"> <input class="icon icon_accept" value="login" onclick="javascript:handleFunction('action_login', document.getElementById('user_name_id').value, document.getElementById('password_id').value); return false;" type="submit"></div>
</form> <!-- login_form -->
I've checked my settings in Chrome and IE.
You might want to use onsubmit instead of onclick for forms... I'm not sure if pressing Enter on a textbox will fire onclick on all browsers.
<form name="login_form" id="login_form" action="" method="POST" onsubmit="handleFunction('action_login', document.getElementById('user_name_id').value, document.getElementById('password_id').value); return false;">
<div class="login_line">name<input name="user_name" id="user_name_id" size="16" maxlength="16" value="" type="text"></div>
<div class="login_line">password<input name="password" id="password_id" size="16" maxlength="16" type="password"></div>
<div class="login_line"> <input class="icon icon_accept" value="login" type="submit"></div>
</form> <!-- login_form -->
Should work as the code is correct. Check browser settings?
In your CSS html,body change overflow-x = hidden to just overflow = hidden
Related
I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>
And I think it's not possible to submit the form in Safari browser
This is working fine in all browsers except safari
<form action="/commonDashboard" name="loginForm" method="post" autocomplete="off" id="loginForm">
<div>
<label>User Email ID</label>
<input type="text" placeholder="Enter your Email Address" id="userEmail" name="userEmail" tabindex="1" />
</div>
<div>
<label>Password</label>
<input type="password" placeholder="Enter your password" id="userPassword" name="userPassword" tabindex="2" />
</div>
<div>
<input type="button" value="Sign In" onclick="validatelogin();" tabindex="3" />
</div>
</form>
Change type="button" to type="submit"
Remove onclick="validatelogin();"
Assuming validatelogin is NOT performing any Ajax, change <form action="/commonDashboard" to
<form action="/commonDashboard" onsubmit="return validatelogin()" and have that function return true to allow submit or false to stop
or better add
window.onload=function() {
document.getElementById("loginForm").onsubmit=validatelogin;
}
In any case, please post the function so we can see what it does
I want the register button to be in same line as login but it wont work when it is placed outside of the form.
<div style="float:right;min-width:440px;width:30%;padding-top:30px;">
<form>
Username:<input name="username" type="text" name="username" style="min-width:120px;"></input>
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
<input type="submit" value="Login"></input>
</form>
<button>Register</button>
</div>
Deried from Vitorino Fernandes' comment. Try following -
<div style="float:right;min-width:440px;width:30%;padding-top:30px;">
<form>
Username:<input name="username" type="text" name="username" style="min-width:120px;"></input><br />
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
<br /> <input type="submit" value="Login"></input>
</form>
<button style="position:absolute; left:140px; top:80px">Register</button>
</div>
I'm guessing that you want to put the button outside the form since you don't want to submit the form on clicking the Register button.
This can be achieved by keeping the register button inside the form - use this for the register button:
<input type="button" value="Register"></input>
Check this JSFiddle. The form will submit on clicking the login button but it won't submit on clicking the register button.
Also see: Difference between <input type='button' /> and <input type='submit' />
Try This : JSFIDDLE
<div style="float:right;min-width:565px;width:30%;padding-top:30px;">
<form style="float:left">
Username:<input name="username" type="text" name="username" style="min-width:120px;"></input>
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
<input type="submit" value="Login"></input>
</form>
<button style="float:left">Register</button>
</div>
Tabbing on Chrome follows the source order for this form nicely, whereas Firefox skips the password reset link, and goes straight to the next thing after the form, which is a button. Does Firefox prioritise buttons and form elements over links for tabindexing? It doesn't make any difference what tabindex number I put on the link
<form method="POST" action="/login" accept-charset="UTF-8">
<label><span class="element-invisible">Email address</span>
<input placeholder="Email address" name="login_email" type="email">
</label>
<label><span class="element-invisible">Password</span>
<input placeholder="Password" name="login_password" value="" type="password">
</label>
<input class="buttonNoStyle submitButtonSolid" value="Login" type="submit">
<div class="underForm">
<input id="rememberMe" name="remember" class="element-invisible" value="all" checked="" type="checkbox">
<label class="rememberMe" for="rememberMe">
Remember me
</label>
<div class="forgot">| <a tabindex="1" class="forgotLink" href="/password/reset">Forgotten password</a></div>
</div><!-- /underForm -->
</form>
<button type="button" class="buttonNoStyle standardButton thinnerButton whiteButton" id="logIn2">Log in</button>
I have a simple login form:
<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST"/>
</div>
<input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
<input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
<button class='btn' type='submit'>Login</button>
</form>
It is using bootstrap for styling. As for js jquery and AngularJS is loaded.
My issue is, when I display this form my submit button goes to the next line. If I inspect dom I see an <div class="actions">...</div> wrapper around my submit button. This does not happen if I omit type='submit' part from the form definition.
My question who is adding this wrapper and how can I avoid it.
If you see the examples of Twitter Bootstrap, I can see they are using two classes for form-inline example. Please check this. fro different types and form with buttons. Try applying well class along with it.
<form class="well 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>