Answer»
A form is a common tool of HTML which is used to collect data from the user.Bootstrap allows us to style forms. Example:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
| form-group | When added as a wrapper around each input type or form control, it creates a stacked form with proper margins. |
<div class="form-group"> |
|---|
| form-inline | All elements are inline in the form along with left margins |
<form class="form-inline" action="someactionpage.jsp"> |
|---|
| form using the grid | uses rows and columns |
<form> <div class="row"> <div class="col"> <input type="text" class="form-control" id="login id" placeholder="Enter login id" name="login"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pwd"> </div></div></form> |
|---|
| form-control | form-control is the default class for styling <input>, <select> and <textarea> elements. |
<input type="password" class="form-control" .... |
|---|
| form-control-lg | large size |
<input type="password" class="form-control-lg" .... |
|---|
| form-control-sm | small size |
<input type="password" class="form-control-sm" .... |
|---|
| form-control-file | form-control-file is used to upload a file |
<input type="file" class="form-control-file" id="formcontrolfileupload"> |
|---|
| form-control-plaintext | to have read only contents in the form without losing the styling. |
<input type="text" readonly class="form-control-plaintext" id="defaulttext" value="someexample@gmail.com"> |
|---|
| form-control-range | Form-control-range is used to include range element. |
<input type="range" class="form-control-range"> |
|---|
| form-check | Form-check is used for creating a checkbox input. |
<div class="form-group form-check">
<input class="form-check-input" type="checkbox" name = "Agree"> |
|---|
| disabled items | disabled items add items that cannot be clicked. |
<fieldset disabled> <div class="form-group"> |
|---|
| readonly | Readonly adds read only text. |
<input class="form-control" type="text" placeholder="I am a read only text" readonly> |
|---|
|
