Bootstrap Forms

devika varshney
Last Updated: May 13, 2022

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> and <text-area> etc. and these all are styled with .form-control class with 100% width and display: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> and only applies margin-bottom.

Form controls of bootstrap forms 

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

<input> , <select>, <text-area> and radio are textual form controls which can styled with  .form-control class. moreover, we will go through all of them one by one.

Let's start with 

  • <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.

  • Text area
     

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

  • 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, and for 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.

  • 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.

Different layouts of bootstrap forms

  • 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 vertical form with bootstrap -

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

 

<h1> Hello, world! </h1>
<form role = "form">


   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

 

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-

  1. All the elements are left-aligned, and the labels are also next to them.
  2. We require at least a 576px wide viewport for controls' inline appearance.
  3. Overrides bootstrap width: 100% to width: auto and display:block to display:flex.
  4. 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.

 

<h1> Hello, world! </h1>
<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

 

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. 

 

<h1> Hello, world! </h1>
<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>

</form>

 

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 -

  1. Parent <form> element should contain class .form-horizontal
  2. <div> tag with .form-group class should wrap all labels and form-control
  3. 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

  1. 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.
     
  2. 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.
     
  3. What is control sizing?
    Classes like .input-lg and .col-lg-* are used to set the height and width of forms

Key Takeaways

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

Don’t stop here. Check out our Full-stack development course to learn web development from scratch. You can also check out the blog on the JavaScript Interview Questions.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think