Bootstrap Forms Examples | Complete Form in boostarap
Basic example
A basic example of a simple login form with input fields (email and password), checkbox and submit button.
Checkbox and “forgot password” link are positioned inline by using 2 column grid layout.
[su_note note_color=”#e3e3e3″]Note: Most of the demo examples have a fixed width for the demo purpose. Included code examples do not have a fixed width, so they’ll naturally fill the full width of its parent element.[/su_note]
To control the width of the form place it in the grid, use the sizing utilities, or set the width inline.
<form>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form1Example1" class="form-control" />
<label class="form-label" for="form1Example1">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form1Example2" class="form-control" />
<label class="form-label" for="form1Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="form1Example3"
checked
/>
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
Every group of form fields should reside in a <form> element. MDB provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.
Bootstrap 4 Default Settings
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Bootstrap 4 Form Layouts
Bootstrap provides two types of form layouts:
Stacked (full-width) form
Inline form
Bootstrap 4 Stacked Form
The following example creates a stacked form with two input fields, one checkbox, and a submit button.
Add a wrapper element with .form-group, around each form control, to ensure proper margins:
Example
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In an inline form, all of the elements are inline and left-aligned.
[su_note note_color=”#e3e3e3″]Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.[/su_note]
Additional rule for an inline form:
- Add class .form-inline to the <form> element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
Example
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Login form
Typical login form with additional register buttons.
HTML
<form>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form2Example1" class="form-control" />
<label class="form-label" for="form2Example1">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form2Example2" class="form-control" />
<label class="form-label" for="form2Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="form2Example3"
checked
/>
<label class="form-check-label" for="form2Example3"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Sign in</button>
<!-- Register buttons -->
<div class="text-center">
<p>Not a member? <a href="#!">Register</a></p>
<p>or sign up with:</p>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
Register form
Typical register form with additional register buttons.
HTML
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="form2Example3"
checked
/>
<label class="form-check-label" for="form2Example3">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
Form Validation
Example
In this example, we use .needs-validation, which will add the validation effect AFTER the form has been submitting (if there’s anything missing). Note that you will also have to add some jQuery code for this example to work properly:
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
Related searches for Bootstrap Forms Examples
- PHP laravel CRUD Create, edit, update and delete
- complete form validation in javascript with source code
- PHP CRUD Create, edit, update and delete in MySQL database
- Ajax CRUD [CReate Update Delete] with PHP and MySQL database
- GET Method: Data is requested from a specific resource
- Json in js | Get value from json object in javascript