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
Related
I have an edit.ejs page to edit a camp , in this page I have two forms , one to submit an edit and the other from to delete the camp, each form has a button , and they are below each other , how can I make the buttons aligned in one so that they are next to each other ?
I'm using Bootstrap5 v5.3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]" value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price" aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="mb-3"><button class="btn btn-success">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
The buttons should be aligned like the image below
If you need to keep the HTML structure as it is, you can simply use the helper class float-start on the "save" button (I also added a small margin to the right of it with me-2 class).
If you can change the structure, #isherwood's answer will do just fine.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3"><button class="btn btn-success float-start me-2">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
Form inputs are not required to be inside the form. I'd move them both out of the form and reference their forms with the form attribute. Then you can position them as you like. This requires corresponding name attributes on the forms.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST" name="campgroundEditForm">
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST" name="campgroundDeleteForm">
</form>
<div class="mt-2">
<button class="btn btn-success" form="campgroundEditForm">Edit</button>
<button class="btn btn-danger" form="campgroundDeleteForm">Delete</button>
</div>
</div>
</div>
I assume you cannot change HTML as it might come from different JSP files but the best way to do it is to move buttons to the single form. This solution is only if you have no access to change forms html (as it might come from MFE or other source/app and as mentioned buttons should belong to the same form unless is MFE concept that requires different action upon clicking on button)). Anyhow it was not requested to set buttons on left so thought of showing case with right aligned anyway left aligned can be achieved by adding flex-starts). Note that mb-3 class is removed from first button as its misaligning buttons in vertical scope or you can add the same class to second button. One can tell by classes used in HTML that you have bootstrap added so I have added it in example code as well.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css");
.form-wrapper{
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.align-right{
float:right;
margin-right:0.5rem;
}
<!DOCTYPE html>
<html>
<body>
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3 form-wrapper">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]"
value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price"
aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description"
name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="remove-mb-3-class-from-here-to-align-buttons"><button
class="btn btn-success align-right">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</body>
</html>
I have a form that has 2 text and 1 button to allow user to enter searching date, and I need it to display inline. I followed using <form class="form-inline"> but it still doesn't work. It shows like that:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="pull-right">
<form class="form-inline" role="search" action="<?php echo base_url('report/searchDate')?>" method = "post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Date From" name = "searchDateFrom" size="10px; ">
<input type="text" class="form-control" placeholder="Date To" name = "searchDateTo" size="10px; ">
<div class="input-group-btn">
<button class="btn btn-default " type="submit" value = "searchDateTo"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Use input-daterange class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
For more information : https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range
This is my form:
<div class="form" method="POST" action="application/loaddata.php" id="add-item-form">
<div class="form-group">
<label class="task-label" for="task-name">name:</label>
<input type="text" class="form-control form-size" id="task-name" name="inp-name">
</div>
<div class="form-group">
<label class="task-label" for="task-email">E-mail:</label>
<input type="email" class="form-control" id="task-email" name="inp-email">
</div>
<div class="form-group">
<label class="task-label" for="task-text">text:</label>
<textarea class="form-control" id="task-text" rows="5" name="inp-text"></textarea>
</div>
</div>
My submit button, which outside from form:
<input type="submit" class="btn btn-success task-button" value="Добавить" name="do_post" form="add-item-form">
This is does not work. But if i place input="text" near submit in form, then works.
You don't actually have a form! When you write
<div class="form" method="POST" action="application/loaddata.php" id="add-item-form">
...it's just a <div>, and a <div> doesn't have a method or action attribute. You need to use actual <form> tags for the form to be valid, and to be able to use form attribute as targets for your form in other elements.
<form class="form" method="POST" action="application/loaddata.php" id="add-item-form">
<!-- Form-elements goes here -->
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
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>
One of my text field inputs is not rendering properly. I'm using bootstrap. Here's what it looks like.
This is the code I'm using.
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
I noticed that when then input type is exactly text the input field is not rendered properly, but when the type is anything else, the input field is ok. What exactly am I doing wrong?
It seems like, and this is just a guess without being able to see all of your code, you have some style that is matching input[type="text"], and that is what's giving you the odd result.
This is not something wrong with bootstrap, rather, it's probably something on your end.
Works fine, this means you may have old Bootstrap, or some style is overriding default input[text] and notice, bootstrap doesn't care about type="text2" as by default is type of text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>