I have a form with a few fields that need to be inline. Bootstrap is not letting me do this, it renders the form fields on a entire line. Also, I would like the labels to be next to the field.
Is it feasible to wrap a subset of fields in a form tag that is set to form-inline, and how do I get the form fields not to break on their own lines. Here is what I am trying to achieve:
Here is what I've tried:
<div class="form-group">
Zipcode <input type="text" data-bind="value: Zipcode" class="form-control">
Response Time <input type="text" data-bind="value: ResponseNumber" class="form-control"> <select data-bind="options: ResponseUnits" />
</div>'
Also, I have not wrapped the form in <form> because I am using <form> to wrap a file dropzone. I am using knockout and ajax, so I don't need to use forms (unless they are required for bootstrap).
looks like from your example you are more after a horizontal style form. use form groups.
https://jsfiddle.net/whxf78zw/1/
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Zipcode:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="zipcode" placeholder="Enter zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="responseTime">Response Time:</label>
<div class="col-sm-3">
<input type="number" class="form-control" id="responseTime" placeholder="Enter response time">
</div>
<div class="col-sm-3">
<select class="form-control">
<option>Hours</option>
<option>Days</option>
<option>Weeks</option>
<option>Months</option>
<option>Years</option>
</select>
</div>
</div>
</form>
Related
I am working with Laravel 5.4 Framework and I get this issue when the form does not submit anything except the csrf_token().
If I put an input outside of those <div> it will work and submit it, otherwise the browser (Chrome) will only submit the token, as if everything inside the <div> is not part of the form.
How can I submit all the data while using Bootstrap's form-group divs? The layout is not the problem as it does not work even when removing it.
#extends('layouts.master')
#section('content')
<div class="container" style="margin-top: 1%">
<p>Welcome, {{$user->name}}, here you can submit a new company for our database.</p>
<form name="suggestCompanyForm" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" aria-describedby="companyNameHelp" placeholder="Enter company name">
<small id="companyNameHelp" class="form-text text-muted">Enter the company's name you would like to suggest</small>
</div>
<div class="form-group">
<label for="companyEmail">Email address</label>
<input type="email" class="form-control" id="companyEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter the company contact email.</small>
</div>
<div class="form-group">
<label for="selectCategory">Select main category</label>
<select class="form-control" id="selectCategory">
<option>Food&Drink</option>
<option>Cosmetics</option>
<option>Electronics</option>
<option>Consumer Goods</option>
<option>Services</option>
</select>
</div>
<div class="form-group">
<label for="description">Company description.</label>
<textarea class="form-control" id="description" rows="5"></textarea>
</div>
<div class="form-group">
<label for="logo">File input</label>
<input type="file" class="form-control-file" id="logo" aria-describedby="logoHelp">
<small id="fileHelp" class="form-text text-muted">Add company logo.</small>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="check" class="form-check-input">
I agree that my submission follows the website rules.
</label>
</div>
<button id="submitCompany" type="submit" class="btn btn-primary" >Submit</button>
</form>
</div>
#endsection
your form inputs are not being submitted because you didn't give them names ...
Try
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
You have to add the action attribute to the form tag.
Edit this line
<form name="suggestCompanyForm" method="post">
to
<form name="suggestCompanyForm" action = "<url-for-the-submission>" method="post">
.You will also need to add this
name="name_of_input_to_submit"
to each input not only the textarea and you are also uploading a file you have to add this to the form tag too.
enctype="multipart/form-data"
I have a form with bootstrap:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div>
<div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
This form gives me this result:
But if i do this change in my editor lines it changes the structure also:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div><div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
And i have this result:
I dont even know why this thing affects the CSS of HTML. Any help?
Because the form inputs are displayed inline, the extra space you removed in the second file caused the inputs to move closer together:
</div><div class="form-group pershkrimiK">
This is what it should be if you want the space between the boxes:
</div>
<div class="form-group pershkrimiK">
When things are displayed inline, whitespace between/around elements is visible.
Is it possible to insert a form with select element inside horizontal form in Bootstrap.
I need to insert a form with select element inside form group.
Bootply code here
Note: Bootply messes the code and remove some form tags, so copy the code below.
The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.
The code is here again:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>
You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle
http://jsfiddle.net/jxe78828/
According to the HTML5 specs, you can't nest one form inside another:
4.10.3 The form element
...
Content model:
Flow content, but with no form element descendants.
Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.
Try this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</div>
</div>
</form>
</div>
You can also see my JSFiddle here
After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:
<select name="country" id="country" class="form-control" form="country-form">
where you can just put empty form any where like this:
<form id="country-form"></form>
or even this form does not exist, the above form field will not be included anyway when submitting the container form.
I was my form labels to appear to the left of my textboxes (labels all right aligned and textboxes all left aligned).
Right now they are all appearing on top of my textboxes:
<form action="" method="post">
<div class="form-horizontal">
<label for="test">Test</label>
<input id="test" type="text" class="form-control" disabled/>
</div>
<div class="form-horizontal">
<label for="more">More</label>
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Using bootstrap's grid. Here is a link to bootply.
<form class="form-horizontal" action="" method="post">
<label class="col-sm-2 control-label" for="test">Test</label>
<div class="col-sm-10">
<input id="test" type="text" class="form-control" disabled/>
</div>
<label class="col-sm-2 control-label" for="more">More</label>
<div class="col-sm-10">
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Without your CSS I won't be able to tell for sure, but try:
label {
display: inline;
}
It would be helpful if you provided the CSS as well as the HTML.
Answer / example is right in the bootstrap examples:
http://getbootstrap.com/css/#forms-horizontal
You can match your form structure to it.
How do we place form fields horizontally using Twitter Bootstrap
I tried below HTML code. But it shows one by one like below
First Name - Text Box
Last Name - Text Box
Search
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="first">First Name</label>
<div class="controls">
<input type="text" id="first" placeholder="firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastname">Last Name</label>
<div class="controls">
<input type="text" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Search</button>
</div>
</div>
</form>
I want First Name and Last Name should be placed horizontally in first line and in next line Search Button.
Like this
First Name - Text Box Last Name - Text Box
Search
Add inline class to First name, Last name control-group div:
<div class="control-group inline">
CSS
.inline {
display:inline-block;
}
Working fiddle http://jsfiddle.net/GgSRN/
try this
<form class="form-group form-inline">
<label class="control-label" for="first">First Name</label>
<input type="text" id="first" placeholder="firstname">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name">
<div>
<button type="submit" class="btn">Search</button>
</div>
</form>
check bootstrap inline Form
it will be good to go as you said.
Use CSS in a separate file to style your html. I'd personally wrap them in a <div class="row"> using Bootstrap and use one of those for each 'row' you want to create.