<form method="post" role="form" class="form-horizontal">
<div class="form-group">
<div class="radio">
<label class="control-label col-sm-2">
<input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="startDate">
</div>
<div style="float:left">:</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</div>
My radio button display normal with chrome, edge, ff, but in old IE its broken - button and label not close together.
I try to use jsfiddle but radio not display when I use IE.
plz help me.
https://jsfiddle.net/pLvop1ws/2/
Don't use Check box and Radio button in form-group class. Here i wrote it again. Please use this and tell me again your issue..
<form method="post" role="form" class="form-horizontal">
<div class="radio">
<label class="control-label col-sm-2">
<input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" id="startDate">
</div>
<div style="float:left">:</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</div>
</form>
Ok try this one. I edit it
<form method="post" role="form" class="form-horizontal">
<div class="radio">
<div class="form-inline">
<label>
<input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date
</label>
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" id="startDate">
</div>
</div>
:
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</div>
</div>
</form>
Remove "control-label" class and allign
Working code:
<form method="post" role="form" class="form-horizontal">
<div class="form-group">
<div class="radio">
<label class="col-sm-2" style="padding-left:10%">
<input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="startDate">
</div>
<div style="float:left">:</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</div>
</form>
Related
Although button type is submit, name attributes are same for radio buttons, there is action and method attributes for form, and all other requirements are done, input required attribute is still not working.
there is no novalidate attribute in the form as well.
<form action="" method="">
<div class="form-group">
<div class="form-checkbox">
<label for="resheadpay1">
<input id="resheadpay1" type="radio" id="payinthecar" name="flight-type" required/>
<span></span>Pay in the Car
</label>
<label for="resheadpay2">
<input id="resheadpay2" type="radio" id="paybycreditcard" name="flight-type" />
<span></span>Pay by Credit Card
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="txtSource" class="form-control" name="pickLocation" type="text" placeholder="Pickup Location" required/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="txtDestination" class="form-control" type="text" name="dropLocation" placeholder="Dropoff Location" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input id="txtdate" class="form-control" placeholder="Date" type="date" name="datepick" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input id="txttime" class="form-control" type="text" id="datetimepicker" name="timepick" placeholder="hh:mm" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-btn">
<button class="submit-btn" onclick="GetRoute(); showres(); hidebooking(); changeText();" type="submit">Book Now </button>
</div>
</div>
</div>
</form>
I'm trying to create a registration form. But when I try to run my code, part of it doesn't appear on the screen. I use thymeleaf for work with Spring MVC controllers. I looked Thymeleaf tutorials, stackoverflow, etc... but have not seen any solution.
Please tell me what I do wrong or where I can read about solution of this problem.
Below I put the snippet of my html code.
P.S. Sorry for my English.
<div class="container" id="container-middle">
<form class="form-horizontal" role="form" id="register-form" method="post" th:action="#{/post-user-info}" th:object="${user}">
<h2 id="form-header">Sign up for BlaBla</h2>
<div class="form-group">
<label for="login" class="col-sm-5 control-label">Login:</label>
<div class="col-sm-4">
<input type="text" id="login" placeholder="Login" class="form-control" th:field="*{login}">
</div>
</div>
<div class="form-group">
<label for="first-name" class="col-sm-5 control-label">First name:</label>
<div class="col-sm-4">
<input type="text" id="first-name" placeholder="First name" class="form-control" th:field="*{firstName}">
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-5 control-label">Last name:</label>
<div class="col-sm-4">
<input type="text" id="last-name" placeholder="Last name" class="form-control" th:field="*{lastName}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email:</label>
<div class="col-sm-4">
<input type="email" id="email" placeholder="Email" class="form-control" th:field="*{email}">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" id="password" placeholder="Password" class="form-control" th:field="*{password}">
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-5 control-label">Date of birth:</label>
<div class="col-sm-4">
<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">Gender:</label>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${female}">Female
</label>
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${male}">Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-5">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
I didn't pass any model from controller to template, so it couldn't put there any result.
That's it! something like ...
public String goAdd(Model model) {
model.addAttribute(new DtoCustomer());
return "customer/edit";
}
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>`
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<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>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<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-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<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">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<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>
</div>
</div>
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>