In this section, we will learn about the available classes from the Bootstrap framework, which we can make use of while building our forms. Each form can consist of various input elements, such as textual form controls, file input controls, input checkboxes, and radio buttons. The .form-group class is an easy way to add structure to our forms. Using the .form-group class, we can easily group input elements, labels, and help text to ensure proper grouping of elements in the form. Inside the .form-group element, we will add input elements and assign them each the .form-control class.

A sample of a grouping of elements using the .form-group class is as follows:

 <div class="form-group">
 <label for="userName">Enter username</label>
 <input type="text" class="form-control" id="userName" placeholder="Enter username">
 </div>

In the preceding code, we are creating a form group consisting of label and input elements of type text.

On the same lines, we can easily add the textual input elements, such as email, password, and textarea. The following is the code to add the input element of type email:

<div class="form-group">
<label for="userEmailAddress">Enter email address</label>
<input type="email" class="form-control" id="emailAddress" placeholder="[email protected]">
</div>

Similarly, we can easily add an input element of type password as well. Again, notice that we are making use of form-group as a wrapper and adding form-control to the element:

<div class="form-group">
<label for="userPassword">Enter password</label>
<input type="password" class="form-control" id="userPassword">
</div>

Nice. We learned to use form-group and form-control classes on input elements. Now, let's add the same classes to the textarea element. The following is the sample code for adding the classes to a textarea element:

<div class="form-group">
<label for="userComments">Example comments</label>
<textarea class="form-control" id="userComments" rows="3"></textarea>
</div>

You will notice that all of the preceding elements have the same structure and grouping. For select and multiple select input elements, it's also exactly the same. 

In the following sample code, we are creating a select drop-down element and using the form-control class:

<div class="form-group">
<label for="userRegion">Example select</label>
<select class="form-control" id="userRegion">
<option>USA</option>
<option>UK</option>
<option>APAC</option>
<option>Europe</option>
</select>
</div>

We have added a select drop-down element and will allow the user to select only one option from the list. And just by adding an additional attribute, multiple, we can easily allow the user to select multiple options:

<div class="form-group">
<label for="userInterests">Example multiple select</label>
<select multiple class="form-control" id="userInterests">
<option>Biking</option>
<option>Skiing</option>
<option>Movies</option>
<option>Music</option>
<option>Sports</option>
</select>
</div>

That was simple and straightforward. Let's keep rolling.

Now, let's proceed to other important input elements: checkboxes and radio buttons. However, the classes are different for checkbox and radio elements.

There are three new classes that we will learn to implement for checkbox and radio elements:

• To wrap the element, we will use the form-check class
• For the input type checkbox and the radio element, we will use form-check-input
• For checkbox and radio elements, we will need to display labels, for which we will use the form-check-label class:

<div class="form-check">
 <input class="form-check-input" type="checkbox" value="" id="Worldwide">
 <label class="form-check-label" for="Worldwide">
 Worldwide
 </label>
</div>

In the preceding code, we are using the .form-check class, .form-check-input, and .form-check-label to our wrapper div and label elements.

Ditto, on similar lines, we will use the preceding classes to add to input radio elements:

<div class="form-check">
 <input class="form-check-input" type="radio" name="gender" id="maleGender" 
    value="option1" checked>
 <label class="form-check-label" for="maleGender">
 Male
 </label>
</div>
<div class="form-check">
 <input class="form-check-input" type="radio" name="gender" id="femaleGender" 
    value="option2">
 <label class="form-check-label" for="femaleGender">
 Female
 </label>
</div>

In the preceding code, we are creating two radio buttons for the user to select their gender, and the user can make only one selection out of the two options.

In most modern web applications, we will need a user to be able to upload files or assets to our applications. Bootstrap provides us class named "form-control-file", which we can associate to the file upload element.

We will use the form-control-file class to our input type file element. The sample code for this is as follows:

<div class="form-group">
 <label for="userProfilePic">Upload Profile Pic</label>
 <input type="file" class="form-control-file" id="userProfilePic">
 </div>

Great. We have learned to put together all the elements with which we can create our beautiful and powerful forms.