Boostrap Forms
Boostrap 4 Forms
. Form provide data entry of various parameters such as name, email address and password, which in turn are processed by a server inserted in the web application.
Bootstrap 4 it provide set of features for building forms efficiently.
Form Controls:
It provides styling for various form controls such as <input>, <textarea>, and <select>.
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>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Layout:
You can create horizontal or vertical form layouts.
Horizontal forms align labels and controls horizontally, while vertical forms stack them vertically.
<form>
<div class="form-group row">
<label for="exampleHorizontalInput" class="col-sm-2 col-form-label">Horizontal Input</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleHorizontalInput" placeholder="Enter text">
</div>
</div>
</form>
Form Validation:
Bootstrap provides built-in styles for form validation states (valid, invalid).
You can use .is-valid and .is-invalid classes along with feedback messages to indicate validation status.
<form>
<div class="form-group">
<label for="exampleValidationInput">Validation Input</label>
<input type="text" class="form-control is-invalid" id="exampleValidationInput">
<div class="invalid-feedback">Please provide a valid input.</div>
</div>
</form>
Input Groups:
Input groups combine form controls and additional elements like buttons or dropdowns.
Bootstrap provides classes for creating input groups with buttons, dropdowns, or text.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>