Constructing Data Entry Forms

Introduction

Forms are fundamental in web development, allowing users to interact with web applications by entering information. Bootstrap simplifies form styling and provides a cohesive, user-friendly interface.

This tutorial will cover the basics of creating a form with Bootstrap components, such as input fields, checkboxes, radio buttons, and more.

Basic Form Structure

A form in Bootstrap is created using <form> elements combined with classes like .form-group and .form-control for styling.

Example: Basic Form

    <form>
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter your email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Explanation

  • .mb-3: Adds bottom margin to each form field for spacing.
  • .form-label: Styles the label element.
  • .form-control: Styles input fields, ensuring they are consistent and responsive.
  • .btn and .btn-primary: Styles the button with Bootstrap’s primary button look.

Form with Various Input Types

Bootstrap provides styling options for different input types such as text, email, password, checkboxes, and radio buttons.

Example: Different Input Types

    <form>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Enter your password">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">I agree to the terms</label>
        </div>
        <div class="mb-3">
            <label class="form-label">Gender</label><br>
            <input type="radio" name="gender" id="male" value="male" class="form-check-input">
            <label for="male" class="form-check-label">Male</label>
            <input type="radio" name="gender" id="female" value="female" class="form-check-input">
            <label for="female" class="form-check-label">Female</label>
        </div>
    </form>

Explanation

  • .form-check and .form-check-input: Style checkboxes and radio buttons with consistent padding and layout.
  • .form-check-label: Styles labels for checkboxes and radio buttons.
  • Radio buttons are grouped by using the same name attribute (in this case, gender).

Form Layouts: Inline and Horizontal Forms

Bootstrap allows creating inline forms for compact layouts, as well as horizontal forms where labels are aligned with inputs on larger screens.

Example: Inline Form

    <form class="row gx-3 gy-2 align-items-center">
        <div class="col-auto">
            <label class="visually-hidden" for="inlineFormInput">Name</label>
            <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

Example: Horizontal Form

    <form>
        <div class="row mb-3">
            <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
            </div>
        </div>
        <div class="row mb-3">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword">
            </div>
        </div>
    </form>

Explanation

  • row and col-sm-*: Used to align form elements in rows and columns for horizontal layout on larger screens.
  • .col-form-label: Aligns labels in horizontal forms.

Expected Output

The examples above showcase various input types, an inline form, and a horizontal form layout. These provide flexibility and responsive design for data entry forms in Bootstrap.

Expected Output Preview