Bootstrap Forms - Naukri Code 360

Introduction

Bootstrap is an open-source CSS framework making it easy to create attractive web pages with responsiveness. These CSS and javascript-based design templates for forms, buttons, and typography are contained in bootstrap.

In this blog, let us focus on Bootstrap forms. Bootstrap forms are of three types which are vertical, inline, and horizontal. And have some form controls, for example <input>, <select>, <text-area>, etc., These all are styled with .form-control class with 100% width and display type equals to block. We will discuss them deeply as we go along.

Form Groups

For properly structuring the form, the .form-group class is used and leads to a proper grouping of layouts, labels, form validation messages, etc. It is used with <feildset> or <div> tags and only applies a margin to the bottom.

The <form> tag should contain all groups of form fields. We can also disable form elements by using the disabled attribute within the form tag. The default type of the <button> tag is "submit”, and to change it, we must specify the type we want.

Type of Form Control

The <input>, <select>, <text-area>, and radio tags are textual form controls that can be styled with .form-control class. Moreover, we will go through all of them one by one. Let's start with the following:

The Input Form Control

It is the most commonly used text field form that stores data that the user enters. Furthermore, all types of input, for example, text, password, DateTime, DateTime-local, date, month, time, week, number, email, URL, search, tel, and color, are supported by bootstrap.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Coding Ninjas</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Input Form Control Example</h2>
        <form>
            <!-- Username input -->
            <div class="form-group">
            	<label for="username">
            		Username:
            	</label>
            	<input type="text" class="form-control" id="username">
            </div>
    
            <!-- Password input -->
            <div class="form-group">
            	<label for="pass">
            		Password:
            	</label>
            	<input type="password" class="form-control" id="pass">
            </div>
        </form>
    </div>
</body>
</html>

Output:

Text Area

For multiple line inputs, we need a text area, and the number of rows is directly proportional to the size of the box.

Example: Let’s say using the above example, the user wants to enter his/her address then we can use text

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
</head>
<body>

<div class="container">
  <h2>Text Area Example</h2>
  <form>
    <!-- Username input -->
    <div class="form-group">
      <label for="username">
      	Username:
      </label>
      <input type="text" class="form-control" id="username">
    </div>
    
    <!-- Password input -->
    <div class="form-group">
      <label for="pass">
      	Password:
      </label>
      <input type="password" class="form-control" id="pass">
    </div>
    
    <!-- TextArea -->
    <label for="address">
    	Address:
    </label>
    <br>
    <textarea id="address" rows="4" cols="50">
    	Add your address...
    </textarea>
  </form>
</div>

</body>
</html>

Output:

Checkbox and Radios

We use checkboxes and radio buttons when we want our users to select input from given choices. For taking multiple inputs, we use the checkbox. For a single input, we need a radio button that limits the user. For placing these controls in the same line, we use the .checkbox-inline and .radio-inline or .form-check-inline class. Moreover, we can disable them by using the disabled keyword. They are also used for form validation. For providing appropriate spacing between any number of checkboxes and radio buttons, we use the .form-check class. If there are no labels for the inputs, .position-class is given to input form control.

Example: We can also add gender and hobby selection options in the above form using radio buttons and checkboxes form control type. This can be done as:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
</head>
<body>

<div class="container">
  <h2>Checkbox and Radio Example</h2>
  <form>
    <!-- Radio Button-->
    <br>
    <label for="address">
    	Gender:
    </label>
    <br>
    <div class="form-check">
    	<input type="radio" class="form-check-input" id="female">
    	Female
    	<label class="form-check-label" for="female">
    	</label>
    </div>
    
    <div class="form-check">
    	<input type="radio" class="form-check-input" id="makw">
    	Male
    	<label class="form-check-label" for="male">
    	</label>
    </div>
    
    <!-- Check box Example -->
    <br>
    <label for="address">Hobbies:</label><br>
    <div class="form-check">
      	<input type="checkbox" class="form-check-input" id="music">
      	<label class="form-check-label" for="music">
      		Music
      	</label>
    </div>
    
    <div class="form-check">
      	<input type="checkbox" class="form-check-input" id="Dance">
      	<label class="form-check-label" for="check2">
      		Dance
      	</label>
    </div>
    
    <div class="form-check">
      	<input type="checkbox" class="form-check-input"  id="coding">
      	<label class="form-check-label" for="coding">
      		Coding
      	</label>
    </div>
  </form>
</div>

</body>
</html>

Output:

Select

We may select more than one option in this form control, but it permits the user to select one by default. Nevertheless, we can use multiple attributes to select multiple options.

Example: We can also add hobbies using select form control. This can be done as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
</head>
<body>

<div class="container">
  <h2>Select Example</h2>
  <form>  
    <!-- Hobbies using select form control-->
    <br>
    <label for="address">Hobbies:</label>
    <br>
    <select class="form-select" id="hobby">
      <option>Music</option>
      <option>Dance</option>
      <option>Sketch</option>
      <option>Coding</option>
    </select>
  </form>
</div>

</body>
</html>

Output:

Layouts of Bootstrap Forms

Bootstrap forms have three types of layouts. There are vertical, inline, and horizontal. Let’s discuss each of them one by one:-

Vertical Forms

These are also called basic/default forms. The Global styling is applied automatically to individual form controls.

Let us now see the steps to form a vertical form with bootstrap -

Add a form tag with the role form
Add all the necessary form controls inside a div of class .form-group, which will provide optimum spacing
Moreover last but not least, add class .form-control to all the form controls.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js">
  </script>
</head>
<body>
  <h1>Vertical Example</h1>
  <form role = "form">
    <!-- Enter username division-->
    <div class="form-group">
      <label for="ID">Username</label>
      <input type="text" class="form-control" id="ID" placeholder="Username"/>
    </div>
    
     <!-- Enter password division-->
    <div class="form-group">
      <label for="pass">Password</label>
      <input type="password" class="form-control" id="pass" placeholder="Password"/>
    </div>
    
    <!-- Additional Details -->
    <label for="moreDetails">Additional Details:</label><br>
    <textarea id="moreDetails" rows="4" cols="50">
    Add more details like address, hobbies, etc...
    </textarea>


    <!-- Save data division-->
    <div class="checkbox">
      <label><input type="checkbox" />Remember Me</label>
    </div>
    <br>

    <!-- Form submit button-->
    <button type="submit" class="btn btn-success">Submit</button>
  </form>

</body>
</html>

Output

Inline Forms

We need to add class .form-inline in <form> tag to display the set of labels, buttons, and form controls.
Properties of inline forms-

All the elements are left-aligned, and the labels are also next to them.
We require at least a 576px wide viewport for controls' inline appearance.
Overrides bootstrap width: 100% to width: auto and display:block to display:flex.
Moreover, remember to include <label> tag for every form control; otherwise, the screen reader will have trouble, and you can hide inline form labels from the non-screen reader by using class .sr-only.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js">
  </script>
</head>

<body>
<H1>Inline Example</H1>
<form class = "form-inline" role = "form">
    <!-- Enter username division-->
    <div class="form-group">
    <input type="text" class="form-control" id="ID" placeholder="Username"/>
    </div><br>
    
    <!-- Enter password division-->
    <div class="form-group">
    <input type="password" class="form-control" id="pass" placeholder="Password"/>
    </div><br>
    
    <!-- Additional Details -->
    <div class="form-group">
    <label for="moreDetails">Additional Details:</label><br>
    <textarea id="moreDetails" rows="4" cols="50">
    Add more details like address, hobbies, etc...
    </textarea><br>

    <!-- Save data division-->
    <div class="checkbox">
    <label><input type="checkbox" />Remember Me</label>
    </div>
    <br>

    <!-- Form submit button-->
    <button type="submit" class="btn btn-success">Submit</button>
 
</form>
</body>
</html>

Output

Horizontal Forms

Before we look into this concept, we will learn about the form grid.

Grid classes make complex form layouts that require multiple columns, varied width, and more.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Coding Ninjas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js">
  </script>
</head>

<body>
    <h1>Horizontal Example</h1>
    <form>
    
    <!-- Enter username division-->
    <div class="form-group row">
        <label for="Username" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="username" placeholder="Username">
        </div>
    </div>
    
    <!-- Enter password division-->
    <div class="form-group row">
        <label for="password" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
    </div>
    
    <!-- Additional Details -->
    <div class="form-group row">
        <label for="moreDetails" class="col-sm-2 col-form-label">Additional Details</label>
        <div class="col-sm-10">
        <textarea class="form-control" id="moreDetails" placeholder="Add more details like address, hobbies, etc..."></textarea>
        </div>
    </div>
    
    <!--  Save data division-->
    <div class="form-group row">
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Remember Me
        </label>
      </div>
    </div>
  </div>
  
  <!-- Form submit →
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
</body>
</html>

Output

Let us now see what form rows are used for more compact and tighter layouts. Furthermore, for that, we add class .row or .form-row in <div> tag.

Now let us get back to the horizontal forms. We use the .row class to create horizontal forms with the grid system to form groups. Furthermore, we need the .col-*-* class to specify the width of the layout and controls. Adding .col-form-layout class to labels leads to vertically center alignment with their respective form controls.

Let us now see the steps to form horizontal form with bootstrap -

Parent <form> element should contain class .form-horizontal
<div> tag with .form-group class should wrap all labels and form-control
And labels should have class .control-label

Note- Horizontal forms transform to vertical forms on small screens (767px or below), which means labels are placed above form controls.

Frequently Asked Questions

What is Bootstrap?

Bootstrap is an open-source CSS framework, making it easy to create attractive web pages with responsiveness.

What are forms in HTML?

An HTML Form is a document that uses interactive controls to save a user’s information on a web server. An HTML form holds many types of information such as a username, password, contact number, email address, etc. Checkboxes, input boxes, radio buttons, submit buttons, and other elements are used in HTML forms.

What is a read-only attribute?

Modification of input's value is prevented by readonly boolean attribute. Moreover, to remove default form settings, we use .form-control-plaintext and preserve the correct margin and padding.

What are different types form control states?

Bootstrap forms have form control states like Input focus, disable inputs, disable fieldsets, and validation states. Validation includes class like .has-error, .has-warning and .has-success.

What is control sizing?

Classes like .input-lg and .col-lg-* are used to set the height and width of forms.

Conclusion

In this blog, we enlisted about the bootstrap forms, their different types of layouts, and form controls that are used to make attractive forms on the webpage.

You can refer to other such articles using the below links:

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, Java Programming, and System Design, etc. Have a look at the interview experiences and interview bundle for placement preparations. And also, enroll in our courses and refer to the mock test and problems available.