How would I add a horizontal form to a legend form? When I try to do it, the horizontal form doesn't look as it should: http://i.imgur.com/tJAT5k4.png
Here's my code:
<form>
<fieldset>
<legend>Legend Text</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</fieldset>
</form>
All of the CSS is the bootstrap default CSS.
Remove the outer <form> tag.
<fieldset>
<legend>Legend Text</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</fieldset>
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>
I have tried all the possible ways but I could not get the fields horizontally aligned.
<form class="form-horizontal" role="form">
<div class="form-inline">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
</div>
I also tried
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="acctName" class="col-sm-2 control-label">Account Name </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-sm-2 control-label">Account ID </label>
<div class="col-sm-10">
<input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
</div>
</div>
Still, the fields appear stacked vertically.
What am I doing wrong?
Check this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="acctName" class="control-label">Account Name </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctName" placeholder="Account Name" />
</div>
<div class="form-group">
<label for="acctId" class="control-label">Account ID </label>
<input type="text" class="form-control input-xlarge" ng-model="vm.acctId" placeholder="Account ID" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
It seems to be invalid use of classes. Try the following code:
<form class="form-inline">
<fieldset>
<div class="form-group">
<label for="acctName" class="col-lg-2 control-label">Account Name</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctName" ng-model="vm.acctName" placeholder="Account Name" />
</div>
</div>
<div class="form-group">
<label for="acctId" class="col-lg-2 control-label">Account ID</label>
<div class="col-lg-10">
<input type="text" class="form-control input-xlarge" id="acctId" ng-model="vm.acctName" placeholder="Account ID" />
</div>
</div>
</fieldset>
</form>
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.
Screenshot of form
I'm having trouble with Bootstrap. I have a form with three textboxes. The top textbox, email, is not aligned with the rest of the textboxes. I've included the HTML:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="email"></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</form>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<span></span>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
</form>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="username"></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
I don't understand what I'm doing wrong. Any help would be appreciated, thanks.
Using form class only one time not again & again and if you want text like "email" then use <label class="control-label col-sm-4" for="email">Email</label> otherwise no use of it and use only 12 column as [col-sm-2] for label and for input [col-sm-10] or you can use as [col-sm-4] or [col-sm-8]
<form role="form" action="register.php" method="POST" class="form-horizontal novalidate">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have missplaced few css class,replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" class='form-horizontal novalidate' role="form">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter User Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter Password"> </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have used wrong html code. Replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
Here is my jsfiddle code : https://jsfiddle.net/0oeabj76/1/
I want to markup simple form on the bootstrap. This code from bootstrap docs:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
How can I add a checkbox before label? Here is the jsfiddle
try this:
<div class="control-group">
<div class="controls">
<label><input type="checkbox" /> A checkbox</label>
</div>
</div>