How to create forms using Twitter Bootstrap ?
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.
HTML
<!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:
HTML
<!DOCTYPE html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Bootstrap forms</title></head> <body> <script src= 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.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap forms</title> <link href= rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src= 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:
Basic bootstrap form
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:
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap forms</title> <link href= rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= 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:
Dropdown menu using bootstrap
Toggle Switch: To add a toggle switch add both form-check and form-switch class to a checkbox input.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap forms</title> <link href= rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= 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:
Toggle Switch using bootstrap
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.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap forms</title> <link href= rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= 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.
Bootstrap form with input validation
Please Login to comment...