I am creating a inline form using the bootstrap template of MVC, but when i create an inline form with this code:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
this is the result:
how can achieve a inline form?
Add your button in form group
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<form class="form-inline">
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</form>
Try this.
Related
I have an html form that :
looks like
And I want that those values doesn't appear like these, just blank.
How can I do it?
The code in fact is here: github
Blank input as you want... please run and see
<div class="container">
<h1>Add New Book</h1>
<div class="row">
<div class="col-md-6">
<form (ngSubmit)="saveBook()" #bookForm="ngForm">
<div class="form-group">
<label for="name">ISBN</label>
<input type="text" class="form-control" [(ngModel)]="book.isbn" name="isbn" required>
</div>
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" [(ngModel)]="book.title" name="title" required>
</div>
<div class="form-group">
<label for="name">Author</label>
<input type="text" class="form-control" [(ngModel)]="idA" name="author" required>
</div>
<div class="form-group">
<input type="text" class="form-control" [(ngModel)]="book.author" name="author" required>
</div>
<div class="form-group">
<label for="name">Publisher</label>
<input type="text" class="form-control" [(ngModel)]="book.publisher" name="publisher" required>
</div>
<div class="form-group">
<label for="name">Price</label>
<input type="number" class="form-control" [(ngModel)]="book.price" name="price" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" [disabled]="!bookForm.form.valid">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
</div>
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
UPDATE based on #HebleV:
I'm having a little issue with formating and trying to show html block in one row
Here is my html code
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
screenshot:
since you're using bootstrap,change your code to this..
<form action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="form-group" ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
this is my sample output
http://goo.gl/PYklyR
Add display:inline-block to your divs.
Maybe try placing them into "row" and "col"s? (I haven't checked that code, but you get the idea ;))
<div class="row">
<form class="navbar-form" role="search">
<div class="col-*-3"><div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div></div>
<div class="col-*-3">
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</div>
</form></div>
By "*" I mean md, lg etc. (you know, screen size thingies)
Since you are using bootstrap you can do the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/lightcast/6nwvnspd/
Remove input group for other 2 fields and include all 3 fields in one single- div class="input-group" check this http://codepen.io/anon/pen/YwRNPM
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div ng-show="selected == 'Employer Search'">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
I have an interesting problem here.
I have two forms on the same page, the exact same code copy and pasted. Each form has a hidden input to identify the form on the backend, and each form has an <input type="submit"> for submission.
The only difference between the two is that the first form has one less <input type="text">.
The problem is that the form with 3 <input type="text"> fields is centered while the form with 2 <input type="text"> is not. When I add a third <input type="text"> the form is centered.
It seems as if the form has has to have a certain amount of inputs for it to center.
Here is a JSFiddle
Make sure to stretch your browser so you can see the whitespace on the right side of the top form.
And my HTML...
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an updated Fiddle
Changing your text-center to center-block will center the element. I added it to the second because it wasn't a true center either.
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changeEmail">
<!-- Hidden input to identify the form -->
<!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changePassword">
<!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid