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>
Related
I'm using Bootstrap and Laravel.
I would like to align two buttons "Update" and "Delete" next to each other.
BUT the Delete button has its own route and fields. So I created two forms.
Of course, the Delete button is now below the Update button.
Question: How can I make them next to each other instead?
I think a form inside of a form is not standard. Plus, it actually messes with the fields being sent.
Are there CSS rules I could apply for this to work?
I created a JSFiddle if you want to try it out: https://jsfiddle.net/0e5jk8yr/
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="/route2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
If it's not possible with CSS, feel free to comment and suggest UI design for item update/deletion.
Thanks to everyone reading and trying to figure this out.
Side note: I'm tagging this as Laravel, in case someone knows tricks I could use with Laravel/Blade for forms leading to deletion.
If CSS doesn't work, one solution would be to use only one form leading to update(), then call the destroy() method if the delete button was pressed.
Method 1
If you want to keep the way it is right now you can give the forms the property of display: inline;.
form {
display: inline;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Method 2
However, having two forms is not necessary because you can give the inputs a name attribute and then call the functions with the name. So when the form is submitted it will either return $_POST['submit'] or $_POST['delete'].
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button name="submit" type="submit" class="btn btn-success">Update</button>
<button name="delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Try this.
#form2 {
position: absolute;
top: 74px;
left: 80px;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Or like this:
.btn-danger {
position: absolute;
top: -33px;
left: 90px;
}
form {
position: relative;
}
https://jsfiddle.net/0e5jk8yr/1/
Here is your corrected code. Please check it
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
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 want to put a form in my site I use base form codes from bootstrap official site but view of getbootstrap.com is very different than my view(Especially button and input view very different from the site )
HTML:
<form>
<fieldset>
<legend>dfhadfhahhf</legend>
<label>isim</label>
<input type="text" placeholder="Type something…">
</fieldset><br>
<fieldset>
<label>isim</label>
<input type="text" placeholder="Type something…">
<button type="submit" class="btn">Submit</button>
</fieldset>
<!-- Form -->
</form>
By the way I have all components of bootstrap:
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
where is the problem? :(
your missing some class names etc try something like
<form role="form">
<div class="form-group">
<legend>dfhadfhahhf</legend>
<label>isim</label>
<input type="text" placeholder="Type something…" class="form-control">
</div>
<br>
<div class="form-group">
<label>isim</label>
<input type="text" placeholder="Type something…" class="form-control">
<button type="submit" class="btn btn-default">Submit</button>
</div>
<!-- Form -->
</form>
for instance :
<form role="form">
and swopped your fieldset for:
<div class="form-group">
etc
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
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>