Forms are important and unavoidable part of any website. Bootstrap 4 uses the standard HTML5 form elements to add variety of elements within a form. In this article let us explore on how to create different styles of forms in Bootstrap 5. Remember, Bootstrap is a frontend framework. It only allows you to create readymade components with precompiled CSS and scripts. You should find a way to process the form inputs received at your server.
Bootstrap 5 Forms Tutorial
This tutorial covers the following topics:
- Bootstrap 5 form classes
- Kitchen sync form
- Inline forms
- Using form group
- Form using grid layout
- Sizing and adding help text
- Other variations
- Form validations
1. Bootstrap Form CSS Classes
Form is a bigger component compared to many other components like button, badges and alerts. It contains the following basic CSS classes:
| CSS Class | Description | Remarks |
| .form-group | Used to group form controls | |
| .form-control | Text inputs | It can be a text, password, date, time, etc. |
| .form-control-file | File Upload | |
| .form-check | Checkbox and radio button | |
| .form-check-input | Input element class | For checkbox and radio button |
| .form-check-label | Text label class | For checkbox and radio button |
| .form-control-lg | Larger form elements | |
| .form-control-sm | Smaller form elements | |
| .form-control-plaintext | Plain text input | Used for read only input elements |
2. Kitchen Sync Form Using Various Elements
Forms can contain different types of elements like text input, password, single select, multiple select, textarea, file upload, checkbox, radio buttons and submit button. Each element is grouped inside a <div> with “.form-group” class. You can also use <fieldset> to group similar elements like radio buttons and checkboxes together. Let us create a kitchen sync form with different elements to understand better.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Form -->
<form>
<!-- 1. Text Input -->
<div class="form-group">
<label for="username">Enter Username</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
<small id="Username" class="form-text text-muted">Enter username to login.</small>
</div>
<!-- 2. Password -->
<div class="form-group">
<label for="password">Enter Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<!-- 3. Single Select -->
<div class="form-group">
<label for="singleselect">Single Select from the Dropdown</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 4. Multiple Select -->
<div class="form-group">
<label for="multipleselect">Multiple Select from List</label>
<select multiple class="form-control" id="multipleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 5. Textarea -->
<div class="form-group">
<label for="textarea">Textarea Input</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- 6. File Upload -->
<div class="form-group">
<label for="fileupload">Upload File</label>
<input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload">
<small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small>
</div>
<!-- 7. Radio Buttons -->
<fieldset class="form-group">
<legend>Radio Buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked>
Option 1</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2">
Option 2 </label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled>
Option 3</label>
</div>
</fieldset>
<!-- 8. Checkbox -->
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 1.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 2.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 3.
</label>
</div>
</fieldset>
<!-- 9. Submit Button -->
<button type="submit" class="btn btn-success">Submit</button>
</form>
<!-- End of Form -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>The result will look like below on the browser:
The form elements are identified with numbers and the corresponding code is marked with the comment section for understanding purpose. The above kitchen sync form has the complete code including Bootstrap CSS and scripts. In all the below examples, we have only given the code block for form component. You can replace the code block between start and end of form with the following codes to create different styles of forms.
3. Inline Forms
If you have noticed in the above example, all the elements are aligned below the label or legend. You can also make the elements aligned inline using “.form-inline” class like below:
<form class="form-inline">
<label class="sr-only" for="inlineforminput">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineforminput" placeholder="Username">
</div>
<label class="sr-only" for="inlineform">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password">
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">Remember
</label>
</div>
<button type="submit" class="btn btn-info">Login</button>
</form>And the result will be shown like below with all three elements aligned horizontally in a single row.
4. Grouping Form Elements with Form Group
You can easily group similar elements within a form using “.form-group” class like below:
<form>
<div class="form-group">
<label class="form-control-label" for="formGroup1">First Name</label>
<input type="text" class="form-control" id="formGroup1" placeholder="First Name">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup2">Last Name</label>
<input type="text" class="form-control" id="formGroup2" placeholder="Last Name">
</div>
</form>The grouping will add the border bottom as shown below, you will not see any other visible changes with “.form-group” class.
5. Form with Grid System
When you need different columns and width for different form elements then use the default grid system to align the elements as needed. Below is an example of a form with grid layout:
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Email" class="col-form-label">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="Password" class="col-form-label">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-form-label">Address</label>
<input type="text" class="form-control" id="Address" placeholder="Address First Line">
</div>
<div class="form-group">
<label for="Address1" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="Address1" placeholder="Address Second Line">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="City" class="col-form-label">City</label>
<input type="text" class="form-control" id="City" placeholder="City">
</div>
<div class="form-group col-md-4">
<label for="State" class="col-form-label">State</label>
<select id="State" class="form-control">Choose</select>
</div>
<div class="form-group col-md-2">
<label for="Zip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="Zip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>It will produce the following result on the browser:
6. Sizing and Adding Help Text for Fields
In the above example, we have used two more additional classes:
- “.form-control-lg” to make the elements larger. Use “.form-control-sm” class to make it smaller.
- “.form-text” class is used to add help text in muted form with the help of “.text-muted” class.
7. Other Variations
Below are some of the simple ways to customize the Bootstrap 4 form:
- By default the form elements occupy full width which can be restricted by placing it inside a container or using additional CSS.
- Also you can place the forms inside grid classes to control the size and responsiveness of the form.
- It is also possible to have disabled elements using “.disabled” class.
8. Form Validations
The important part of using forms is to validate the mandatory inputs are entered by the user. There are two ways to validate the inputs – use custom script for validation or leave the validation part to the browser.
8.1. Validation with Custom Script
Below is the code for creating a form with custom validation script. The script will check all the required form fields are entered by the user when the submit button is clicked.
<form class="container" id="form-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation1">First name</label>
<input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required>
</div>
<div class="col-md-6 mb-3">
<label for="validation2">Last name</label>
<input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation3">City</label>
<input type="text" class="form-control" id="validation3" placeholder="City" required>
<div class="invalid-feedback">
Enter city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation4">State</label>
<input type="text" class="form-control" id="validation4" placeholder="State" required>
<div class="invalid-feedback">
Enter state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation5">Zip</label>
<input type="text" class="form-control" id="validation5" placeholder="Zip" required>
<div class="invalid-feedback">
Enter zip code.
</div>
</div>
</div>
<button class="btn btn-secondary btn-md" type="submit">Submit</button>
</form>
<script>
// Custom JavaScript for Validation
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("form-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>The validation will show the below result if the user click the submit button without filling the mandatory fields.
8.2. Browser Validation
You can just remove the custom script in the above form code to allow the browser to stop the form submission. The default validation is done by all modern browsers like Chrome, Safari and Firefox.
You will see the following error message, when the user did not fill the required field and submit the form.
Wrapping Up
Forms are important component on any webpage for collecting user inputs. Bootstrap 4 allows to create simple to complex forms to show different input fields with grouping. But complex validation and processing of the collected data at server side needs a scripting language like PHP. So, you should integrate the forms in PHP to get and process the user data.
Leave a Reply
Your email is safe with us.