I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
Related
this button is affecting everything that is in the same line with it, how do i make it fixed without having it affect the things on the same line with it. the fields are affected by the save button. if the save button is is the same line as the form field, it affects the form field
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="EmployeeCode" value="#EmpCode" />
</div>
<div class="form-group">
<label asp-for="IndustryId" class="control-label"></label>
<select asp-for="IndustryId" class="form-control" asp-items="ViewBag.IndustryId"></select>
</div>
<div class="form-group">
<label asp-for="SubIndustryId" class="control-label"></label>
<select asp-for="SubIndustryId" class="form-control" asp-items="ViewBag.SubIndustryId">
<option selected> - None - </option>
</select>
</div>
<div class="form-group">
<label asp-for="YearsExp" class="control-label"></label>
<input asp-for="YearsExp" class="form-control" />
<span asp-validation-for="YearsExp" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Proficiency" class="control-label"></label>
<input asp-for="Proficiency" class="form-control" />
<span asp-validation-for="Proficiency" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BusinessArea" class="control-label"></label>
<input asp-for="BusinessArea" class="form-control" />
<span asp-validation-for="BusinessArea" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Feature" class="control-label"></label>
<input asp-for="Feature" class="form-control" />
<span asp-validation-for="Feature" class="text-danger"></span>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
I've created a preview here: https://www.bootply.com/eItE7SJoQb
Maybe if you were to place the 'things on the same line' that you don't want it to affect..?
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/
Solved: JSfiddle
here is what I wanted, sample:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
</form>
.css:
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
END
UPDATE:
I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle
How do I make it inline in one row without spacing as shown in the screen shot:
<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
<div class="form-group col-md-12">
<label class="col-sm-3 control-label">Location</label>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
as you can see spacing between the input:
JSFiddle
Use form-inline instead of form-horizontal:
<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
<div class="form-group">
<label class="control-label">Location</label>
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
bootply
Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.
Suggestion - change the first col-sm-3 to col-sm-1
Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.
Issue:
1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the glyphicon glyohicon-date within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?
Thanks.
<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>
<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>
<button type="submit" class="btn btn-default">Reserve</button>
</form>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>
Have managed to solve it from the given link: With optional icons
<div class="form-group has-feedback">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group form-inline">
<label for="datetime" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
</div>
This is a coursera assignment of Bootstrap
using the "With optional icons" method in Bootstrap you can achieve this:
for example, my answer to this question:
<div class="form-group has-feedback">
<label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="date-choose" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
</div>
</div>
you can refer to the link below to find what you want:
http://getbootstrap.com/css/#forms-control-validation
The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.
I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>`