Using bootstrap with web.py's form - html

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.

Related

Even using the simple example on the site my submit button doesn't send

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 ?

HTML hiding form under text information

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';
}

How to reset ONLY a single input tag in a formfield with just html5

i tried the following example and my aim is to achieve that if i press the reset button, only the field in the current line will be reseted, is this possible with only html5 and no jquery/ javascript ? any ideas are welcome :)
<form action="fieldset_legend.htm">
<fieldset>
<legend>Absender</legend>
<label for="vor">Ihr Vorname:</label>
<input id="vor" size="40" maxlength="40" name="Vorname" type="text">
<input type="reset" for="vor" value="reset">
<label for="nach">Ihr Zuname:</label>
<input id="nach" size="40" maxlength="40" name="Zuname" type="text">
<input type="reset" for="nach" value="reset">
</fieldset>
</form>
Use javascript...
function resetInput(id) {
document.getElementById(id+"input").value="";
}
HTML:
<label for="vor">Ihr Vorname:</label>
<input id="vorInput" size="40" maxlength="40" name="Vorname" type="text">
<input type="button" id="vor" onclick="resetInput(this.id) "value="reset">
<label for="nach">Ihr Zuname:</label>
<input id="nachInput" size="40" maxlength="40" name="Zuname" type="text">
<input type="button" id="nach" onclick="resetInput(this.id) value="reset">
I don't believe there is a way to avoid JavaScript in this case as the input 'reset' will reset for all the elements in the form.
reset: A button that resets the contents of the form to default
values.
Input elements

Form action pass correct text values according to submit button clicked

My code is
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
Now I want, if I click on submit1 p1.php should open and I can only access value of text1 and not text2.
Similarly, if I click on submit2 p2.php should open and I can only access value of text2 and not text1.
The pages are openning but I can access both the values ie t1 and t2
I only want to do it with html no js and jquery and I need to make only one form.
NO separate forms allowed.
You can use the attribute formaction on the submit button to change the current action of your form, without using JS. See formaction spec. In case you need to support older browsers like IE9- you can simply use webshim to polyfill it:
<script>
if(!('formAction' in document.createElement('input')){
webshim.polyfill('forms');
}
</script>
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p2.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
hy sam,
Your question look like wrong may be you are asking to submit all form values in different action using two submit button in a single form.
may be this code will help you to submit values in different form action
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p1.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
If you do not want to use javascript, the only solution that I can think of is to use two HTML forms.
<form method="post">
<input type="text" name="t1" id="t1">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
</form>
<form method="post">
<input type="text" name="t2" id="t2">
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>

div wrapper for submit 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>