How to make forms in Bootstrap | Bootstrap

How to make forms in Bootstrap | Bootstrap

Introduction:

The Bootstrap facility has a feature for building forms too. This feature enables the coder to generate a well defined and structured form layout with its features for the webpage. These vary in many aspects of the form with different functionalities and designs. There are many types of forms that are available by Bootstrap.

Pre-requisite:

The main thing about the form is the attribute provided to them. The appropriate type of attributes should be used for the sections in the form. For example, using numbers to get the number value in the form. There are several attributes with built-in features to grab the right info from the user in the respective fields of the form, for instance, the email section will verify whether the given email has corrected format or not.

Method:

There are many types and classes which are used inside the form.

The elements of the form are wrapped inside the form tag. Inside the form tag, there can be rows and columns too, to create a grid inside it. The other elements are usually inside the .form-group classes which act as parent class and inside this there can be other classes too, nested. These classes occupy several classes to carry of functionality to take input from the users in the input sections. These inputs can be mail id, name, password, and more. There are type attributes to perform checkboxes and radio buttons inside the form.

Code:

<form>

      <div class="row">

        <div class="col">

          <div class="form-group">

            <label for="firstname">First Name</label>

          <input type="text" class="form-control" placeholder="First name">

          </div>

        </div>

        <div class="col">

          <div class="form-group">

            <label for="lastname">Last Name</label>

          <input type="text" class="form-control" placeholder="Last name">

          </div>

        </div>

      </div>

      <div class="form-group">

        <label for="exampleInputEmail1">Email address</label>

        <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">

        <small id="emailHelp" class="form-text " style="color: yellow;">We'll never share your email with anyone else.</small>

      </div>

      <div class="form-group">

        <label for="exampleInputPassword1">Password</label>

        <input type="password" class="form-control" placeholder="Password">

      </div>

      <!--  -->

      <div class="form-group">

        <label for="exampleFormControlFile1">Example file input</label>

        <input type="file" class="form-control-file">

      </div>

      <!--  -->

      <label for="interest">Field Of Interests</label> <br>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

        <label class="form-check-label" for="inlineCheckbox1">Technical</label>

      </div>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

        <label class="form-check-label" for="inlineCheckbox2">Non-Technical</label>

      </div>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1">

        <label class="form-check-label" for="inlineCheckbox1">Marketing</label>

      </div>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option2">

        <label class="form-check-label" for="inlineCheckbox2">Designing</label>

      </div>

      <br>

      <!--  -->

      <label for="gender">Gender </label> <br>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="radio" name="inlineRadioOptions" value="male">

        <label class="form-check-label" for="inlineRadio1">Male</label>

      </div>

      <div class="form-check form-check-inline">

        <input class="form-check-input" type="radio" name="inlineRadioOptions" value="female">

        <label class="form-check-label" for="inlineRadio2">Female</label>

      </div>

      <!--  -->

      <br><br>

      <div class="form-check">

        <input type="checkbox" class="form-check-input">

        <label class="form-check-label" >Check me out</label>

      </div>

      <br>

      <button type="submit" class="btn">Submit</button>

    </form>

In the above code, there is a form comprising of basic elements with some inline elements too.

Output:

For more reference do check out the documentation on Bootstrap Forms.