BS Forms
Bootstrap's Default Settings
Bootstrap automatically styles form controls globally:
All textual <input>, <textarea>, and <select> elements with class .form-control have a 100% width.
Bootstrap Form Layouts
Bootstrap offers three different form layouts:
- Vertical form (the default)
- The horizontal form
- Linear form
Standard rules for each of the three form layouts:
- Wrap labels and form controls in this <div class=”form-group”>. (Required for optimal spacing)
- Add the .form-control class to all <input>, <textarea>, and <select> elements.
Bootstrap Vertical Form (default)
------list mukava -----
The example below generates a vertical form with two input fields, one checkbox, and a submit button.
Example
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Inline Form
------list mukava -----
In an inline form, all elements are inline and left-aligned, with labels alongside.
This only applies to forms within viewports that are at least 768 pixels wide!
Additional rule for an online form:
- Add class .form-inline to the <form> element.
The example below generates an inline form with two input fields, one checkbox, and one submit button.
Example
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Tip: If you don’t name each input, screen readers will struggle with your forms. You can conceal the labels for all devices, except screen readers, by using the.sr-only class:
Example
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Horizontal Form
------list mukava -----
A horizontal form indicates that the labels are situated next to the input field (horizontal) on big and medium screens. On narrow screens (767px and less), it will take on a vertical form (labels are placed on top of each input).
Additional rules for horizontal forms:
- Add class .form-horizontal to the <form> element.
- Add the class .control-label to all <label> elements.
Tip: To align labels and form control groups in a horizontal layout, use Bootstrap’s default grid classes.
The example below generates a horizontal form with two input fields, one checkbox, and a submit button.
Example
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">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 class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
