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>
Related
My Formsubmit doesn't work.
Even using the simple example on the site my submit button doesn't send. I can't even send the verification to my email.
I'm using Angular.
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Send</button>
</form>
EDIT: he problem is the button seems to have no function, it doesn't work at all.
I know it is a little late, but try this:
<form #form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method='POST'>
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit" (click)="form.submit()">Send</button>
</form>
Try replace
<button type="submit">Send</button>
by:
<input type="submit" value="Send"/>
Complete Code:
<html>
<body>
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required/>
<input type="email" name="email" required/>
<input type="submit" value="Send"/>
</form>
</body>
</html>
Edited: Right! I used button tag and it works too.
When I click on button, it redirects to:
https://formsubmit.co/matheusproencaescola#hotmail.com
What happen in your case ?
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>
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
I would like to make this form below
<form enctype="application/x-www-form-urlencoded" action="http://cpanel.gateway245.com/auth" method="post">
<p class="element">
<label for="email">Email address</label>
<br/>
<input type="text" name="email" id="email" value="" placeholder="E-mail">
</p>
<p class="element">
<label for="password">Password</label>
<br/>
<input type="password" name="password" id="password" value="" placeholder="Password">
</p>
<input type="submit" name="submit" id="submit" value="Login">
</form>
So that when a link is clicked the form shows I have seen some websites with login forms like this is it possible to be done in html under div menu ui?
Showing/hiding content can't be done in HTML alone - you'll need JavaScript to handle the click event.
This is a rudimentary example to get you on the right track. Many, many, many more examples are on SO already.
CSS
#ttt { display: none; }
HTML
Click to show form
<form id="ttt"> ... </form>
JavaScript
function show(target){
document.getElementById(target).style.display = 'block';
}
I am using web.py in my backed to generate a form. I am also wanting to use bootstraps form class. This is a snippet from my html
<form name="test" method="POST">
$:form.render()
<input type="submit" name="button" value="Login" />
</form>
Which, when generated by web.py, turns into
<form name="login" method="POST" class = "register">
<table>
<tr><th><label for="username">Username:</label></th><td><input type="text" id="username" name="username"/></td></tr>
<tr><th><label for="password">Password:</label></th><td><input type="password" id="password" name="password"/></td></tr>
<tr><th><label for="password_again">Repeat your password:</label></th><td><input type="password" id="password_again" name="password_again"/></td></tr>
</table>
<input type="submit" value="Register" />
</form>
However. This makes it difficult to add bootstrap features to my code.
One example directly from the bootstrap website is :
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
Is it possible to add these sorts of features into my form?
Use $:form.render_css() instead.
I wrote class inherited from Form class with modified render_css method. It look like that:
class bootstrap_form(form.Form):
def render_bootstrap(self):
from web import net
out = []
out.append(self.rendernote(self.note))
for i in self.inputs:
out.append('<div class="form-group">')
if not i.is_hidden():
out.append('<label for="%s">%s</label>' % (i.id, net.websafe(i.description)))
out.append(i.pre)
out.append(i.render())
out.append(self.rendernote(i.note))
out.append(i.post)
out.append('</div>')
out.append('\n')
return ''.join(out)
I hope you'll find this useful.