1. Introduction

In this tutorial, we aim to explore the fundamental concepts of form controls and input groups in Bootstrap. Bootstrap, a popular framework for web development, provides us with ready-to-use components that can make our web pages responsive and visually appealing.

By the end of this tutorial, you will be able to:

• Understand form controls and how they work
• Use different types of form controls
• Extend form controls by using input groups

Prerequisites: Basic knowledge of HTML, CSS, and a little bit about Bootstrap will be beneficial.

2. Step-by-Step Guide

Form Controls

Form controls are the core of any form. They are the fields where users can enter information. Bootstrap provides various types of form controls like input, textarea, select, etc. Each of these controls comes with built-in styles that you can use just by adding appropriate Bootstrap classes.

Input Groups

Input groups are used to extend form controls by adding text, buttons, or button groups on either side of the form control. Bootstrap provides classes to handle various options for input groups.

3. Code Examples

Example 1: Using Form Control

<!-- Basic text input -->
<form>
  <div class="form-group">
    <label for="exampleInput">Email address</label>
    <input type="email" class="form-control" id="exampleInput" placeholder="Enter email">
  </div>
</form>

In this example, we have a basic text input inside a form. The form-control class given to the input field applies Bootstrap's built-in styles.

Example 2: Using Input Group

<!-- Input group with text addon -->
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Here, we have an input group with a text addon. The text '@' is added before the input field using Bootstrap's input-group, input-group-prepend, and input-group-text classes.

4. Summary

We've covered the basics of form controls and input groups in Bootstrap. We've learned how to use different types of form controls and how to extend them with input groups.

Next, you should practice using these controls in creating actual forms. You can explore additional form-related components in Bootstrap like checkboxes, radios, and range inputs.

5. Practice Exercises

1. Create a form with fields for entering name, email, and a message. Make use of form controls and style them with Bootstrap classes.

2. Extend the form created in exercise 1 by adding an input group. Add a submit button to the message field.

Solutions:

1. Here's a simple form using Bootstrap form controls:

```html

```

1. Now, let's extend the form with an input group:

```html

```

In this solution, we added a div with class input-group around the textarea. We also added a submit button using input-group-append to place the button after the input field.

Keep practicing and don't hesitate to explore more about Bootstrap form controls and input groups!