Every website that you visit will have some sort of form in it to collect data from the users. A Form consists of input fields that allow the user to enter the data. Bootstrap provides us with a very easy way to add customizable & responsive forms to our web pages.
In this article, we will learn how to create forms using bootstrap 5.
Bootstrap Setup:
Step 1: Create a file with the name index.html and add the initial HTML5 boilerplate code to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap forms</title>
</head>
<body></body>
</html>
Step 2: Now to add bootstrap you need to include the following script tag in the body element of your HTML code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"crossorigin="anonymous"></script>
And this link tag inside the head of your HTML code.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous">
If you need the most up-to-date CDN links, go to the bootstrap website.
After doing this your index.html file should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Bootstrap forms</title>
</head>
<body>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</body>
</html>
Input fields: A basic form contains text input fields, labels, textarea, select options, and a submit button.
To use bootstrap forms there are some standard rules that we can follow.
- By default, the form created will be vertical
- Add form-control class to all text inputs, and select tags.
- For labels add the form-label class
- For a checkbox add form-check class
- For block-level texts use the form-text class
Example: The following code creates a vertical form with two text input fields, a checkbox, and a submit button with the primary bootstrap button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap forms</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</head>
<body>
<!-- Adding it inside a container will center the form-->
<div class="container">
<h4>Basic vertical form with two text inputs a checkbox
and a submit button</h4>
<form>
<!-- mb-3 adds a margin bottom of 3 units to the div -->
<!--Email Input -->
<div class="mb-3">
<label for="email"
class="form-label">
Email address:
</label>
<input type="email"
class="form-control"
id="email"
placeholder="Enter your email id">
</div>
<!--Password input-->
<div class="mb-3">
<label for="password"
class="form-label">
Password:
</label>
<input type="password"
class="form-control"
id="password"
placeholder="Enter your password">
<div id="password-help-block"
class="form-text">
Password needs to be 8 characters long
</div>
</div>
<!--Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox"
class="form-check-input"
id="checkbox">
<label class="form-check-label"
for="checkbox">
Check me!
</label>
</div>
<!-- Submit Button -->
<button type="submit"
class="btn btn-primary">
Submit
</button>
</form>
</div>
</body>
</html>
Output:
Dropdown menu: To add a dropdown using the form-select class on a normal select element and add options normally. All the styles would be applied.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap forms</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h4>Dropdown menu</h4>
<form>
<select class="mb-3 form-select">
<option selected>Default Option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
</div>
</body>
</html>
Output:
Toggle Switch: To add a toggle switch add both form-check and form-switch class to a checkbox input.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap forms</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h4 class="mt-3">Toggle Switches</h4>
<form>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
id="switch" />
<label class="form-check-label" for="switch">
Toggle Me
</label>
</div>
</form>
</div>
</body>
</html>
Output:
Creating a complete form with input validation: To add user validation for input fields there are two methods.
- By adding was-validated class to the form element if validation needs to be done on the client-side or,
- by adding needs-validation class to the form element if validation is to be done on the server-side.
We can also add valid-feedback or an invalid-feedback message to tell the user what's missing before/after submitting the form.
Example: The following code creates two text input fields and a checkbox with client-side input validations.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap forms</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h4>Form Validation</h4>
<form class="was-validated">
<!-- Email Address Input -->
<div class="mb-3">
<label for="email"
class="form-label">
Email Address:
</label>
<input type="email"
class="form-control"
id="email"
placeholder="Enter your email id"
required />
<div class="valid-feedback">
Valid Email id
</div>
<div class="invalid-feedback">
Please fill out this field.
</div>
</div>
<!-- Password Input -->
<div class="mb-3">
<label for="password"
class="form-label">
Password:
</label>
<input type="password"
class="form-control"
id="password"
placeholder="Enter your password"
minlength="8" required />
<div class="form-text"
id="password-help-block">
Password needs to be 8 characters long.
</div>
<div class="valid-feedback">
Valid Password.
</div>
<div class="invalid-feedback">
Please fill out this field.
</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input class="form-check-input"
type="checkbox"
id="checkbox" required />
<label class="form-check-label"
for="checkbox">
I agree on T & C.
</label>
<div class="valid-feedback">
You Agree to the T & C.
</div>
<div class="invalid-feedback">
Check this checkbox to continue.
</div>
</div>
<button type="submit"
class="btn btn-primary">
Submit
</button>
</form>
</div>
</body>
</html>
Output: This code will create the following form.