Whenever I use a <form> that's separated by the closing </form> via a </div>, the browser (chrome & firefox at least) closes the <form> tag. Below is the sample code
<div class="modal-body">
<form method="post" action="/api/users/">
<textarea name="description">
</textarea>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
Here is the fiddle
You can't do it the way you show; it's not valid HTML.
If you want to span the form across multiple <div>'s, you need to put the form tag outside them:
<form method="post" action="/api/users/">
<div class="modal-body">
<textarea name="description">
</textarea>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</form>
Related
i am new to web design and i am working on some projects out of a book. i have one where i am supposed to use a element and a element. in the book i read that the reset button should reset all elements to the values that they had when the page was initially loaded, but that never happens. i have also tried looking at the event listener break points in chrome dev tools for a submit event when the submit button is clicked. this also seems not to work. am i missing something here? i am going to post my html and hope that you can help me see what my mistake is.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
<div class="panel-body">
<form data-coffee-order="form">
<div class="form-group">
<label for="coffeeOrder">Coffee Order</label>
<input class="form-control" name="coffee" value="" id="coffeeOrder">
</div>
<div class="form-group">
<label for="emailInput">Email</label>
<input class="form-control" type="email" name="emailAddress" value="" id="emailInput">
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="short">
Short
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="tall" checked>
Tall
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="grande">
Grande
</label>
</div>
<div class="form-group">
<label for="flavorShot">Flavor Shot</label>
<select id="flavorShot" class="form-control" name="flavor">
<option value="">None</option>
<option value="caramel">Caramel</option>
<option value="almond">Almond</option>
<option value="mocha">Mocha</option>
</select>
</div>
<div class="form-group">
<label for="strengthLevel">Caffeine Rating</label>
<input id="strengthLevel" type="range" name="strength" value="30">
</div>
</form>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>
You should put it in the 'form' tag ;)
You have to have the inputs and buttons inside a form tag:
<form>
<section>
<div class="panel panel-default">
...
</section>
</form>
The input elements need to be contained within the <form>.
For example:
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
The reason for this is obvious when you are dealing with multiple forms. How would the submit and reset input buttons now which form they were dealing with if not contained within the form?? For Example:
<form>
...
</form>
...
<form>
...
</form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
The correct implementation:
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
I have a small issue with a required field in a body of a bootstrap modal, ideally i want to validate the field before submitting but for some reason required is working , Can you please have a look
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="$dismiss()" >
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title"><b>Additional Information:</b> ( This info will be added to all incident selected )</h5>
</div>
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="$close()" >Create</button>
</div>
</body>
Thanks
Change your submit button from type="button" to type="submit".
required attribute only works when there's a submit event listener.
Check out:
Form inputs in modal not showing as required
Try including the buttons inside the form tag:
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<input type="submit" class="btn btn-primary" ng-click="$close()" ng-disabled="inputForm.$invalid" value="Create" />
</div>
</form>
</div>
Let me know if this helps
I have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting
Iam new to bootstrap and I am trying to add an action="doform.php" to a form but I cant get it to work, where in this code should I add action?
<form class="form-inline">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
I have tried the following but it doesnt do anything...
<form class="form-inline">
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</form>
Inside the form tag.
And don't forget the method. I assume you'll want to use POST
<form action="doAction.php" method="POST">
Oh, and you only need one submit button.
I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
How do I align these two elements? Here is the HTML:
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
In this case, that is .form-inline class.
Here is proper markup:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
or
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="monEmail#domaine.fr">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top
it s work for me