software-development-company-logo

Tag: Lesson 11: Forms & Form Validation in Bootstrap

  • Lesson 11: Forms & Form Validation in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to create styled forms using Bootstrap and implement built-in form validation for user input.

    🔹 1. Introduction to Bootstrap Forms

    Forms are essential for user input, authentication, and data submission. Bootstrap provides pre-styled form controls, labels, and validation features.

    💡 Why Use Bootstrap Forms?
    ✔️ Pre-styled form fields that look consistent across browsers.
    ✔️ Built-in validation classes for error handling.
    ✔️ Easily customizable using Bootstrap’s grid system.

    🔹 2. Bootstrap Form Basics

    Forms in Bootstrap are built using the <form> element and various input fields.

    ✅ Example: Basic Form

    html
    <div class="container">
    <form>
    <div class="mb-3">
    <label for="name" class="form-label">Full 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 address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>

    🔹 What happens?

    • The form fields automatically get spacing and styling using .form-control.

    🔹 3. Bootstrap Form Layouts

    1️⃣ Inline Forms

    Inline forms display inputs next to each other instead of stacking them.

    ✅ Example: Inline Form

    html
    <form class="row g-3">
    <div class="col-auto">
    <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="col-auto">
    <button type="submit" class="btn btn-success">Search</button>
    </div>
    </form>

    🔹 What happens?

    • The form fields appear in one row instead of stacking.

    2️⃣ Horizontal Form Layout

    Use Bootstrap’s grid system to create a horizontal form.

    ✅ Example: Horizontal Form

    html
    <div class="container">
    <form>
    <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
    <input type="email" class="form-control" id="email">
    </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>

    🔹 What happens?

    • The label is in one column and the input field is in another.

    🔹 4. Bootstrap Form Controls

    1️⃣ Input Types

    Bootstrap supports various input types such as text, password, email, number, date, and file.

    ✅ Example: Input Types

    html
    <input type="password" class="form-control" placeholder="Enter your password">
    <input type="number" class="form-control" placeholder="Enter a number">
    <input type="date" class="form-control">
    <input type="file" class="form-control">

    2️⃣ Floating Labels

    Floating labels move above the input field when users type.

    ✅ Example: Floating Labels

    html
    <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
    <label for="floatingEmail">Email address</label>
    </div>

    🔹 What happens?

    • The label floats above the input field when clicked.

    3️⃣ Select Dropdowns

    Use .form-select to create a styled dropdown menu.

    ✅ Example: Select Dropdown

    html
    <select class="form-select">
    <option selected>Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    </select>

    🔹 What happens?

    • A styled dropdown menu appears.

    4️⃣ Checkboxes & Radio Buttons

    Use .form-check for checkboxes and radio buttons.

    ✅ Example: Checkboxes & Radios

    html
    <div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox">
    <label class="form-check-label" for="checkbox">Check this box</label>
    </div>

    <div class="form-check">
    <input type="radio" class="form-check-input" name="radio" id="radio1">
    <label class="form-check-label" for="radio1">Option 1</label>
    </div>

    🔹 What happens?

    • The checkbox and radio buttons are styled properly.

    🔹 5. Bootstrap Form Validation

    1️⃣ Client-Side Validation

    Bootstrap provides built-in validation for form fields.

    ✅ Example: Form Validation

    html
    <form class="needs-validation" novalidate>
    <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    🔹 What happens?

    • If the field is empty, an error message appears.
    • .invalid-feedback shows validation messages.

    2️⃣ JavaScript-Powered Validation

    You can add JavaScript validation to enhance error handling.

    ✅ Example: JavaScript Form Validation

    html
    <script>
    document.querySelector("form").addEventListener("submit", function(event) {
    if (!this.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
    }
    this.classList.add("was-validated");
    });
    </script>

    🔹 What happens?

    • The script prevents form submission if fields are empty.
    • Adds Bootstrap’s validation classes dynamically.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap forms.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ Which class is used for a Bootstrap-styled input field?
    a) .input-field
    b) .form-control
    c) .form-input
    d) .bootstrap-input

    ✅ Correct Answer: b) .form-control

    2️⃣ What class is used for a Bootstrap dropdown select menu?
    a) .form-dropdown
    b) .form-select
    c) .select-menu
    d) .dropdown-control

    ✅ Correct Answer: b) .form-select

    3️⃣ Which Bootstrap class is used for validation error messages?
    a) .form-error
    b) .alert-warning
    c) .invalid-feedback
    d) .form-danger

    ✅ Correct Answer: c) .invalid-feedback

    📌 True or False

    4️⃣ Bootstrap supports floating labels inside form fields.
    ✅ Answer: True

    5️⃣ .form-group is required to use Bootstrap forms.
    ✅ Answer: False (It is optional.)

    🎯 Practical Challenge

    ✅ Create a Bootstrap form with:

    • Floating labels
    • Styled checkboxes & radio buttons
    • A dropdown select field
      ✅ Implement Bootstrap validation with error messages.
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap forms (.form-control) provide consistent styling for input fields.
    ✅ Floating labels create modern UI forms.
    ✅ Form validation (.invalid-feedback) prevents incorrect user input.
    ✅ Bootstrap supports checkboxes, radio buttons, and dropdowns.