Bootstrap Module 32

  Module 32 : Forms – Basics (Inputs, Labels). 

1. Introduction to Forms (Conceptual Foundation)

What is a Form?

A form is a UI component that collects user input and sends it to a system (server, database, or script).

📌  examples

Login forms

Registration forms

Contact forms

Feedback forms

Payment forms

Why Forms Matter (Insight)

According to UX:

90% of user interactions with websites involve forms

Poor form design causes form abandonment rates above 60%

Clear labels and spacing can increase completion rate by 30–40%

👉 That’s why inputs and labels are critical.

2. HTML Form Basics (Before Bootstrap)

Basic HTML Form Structure

<form> <label for="username">Username</label> <input type="text" id="username"> </form>

Key Concepts

Element

Purpose

<form>

Container for input fields

<label>

Describes the input

<input>

Accepts user data

for

Connects label to input

id

Unique identifier

📌 Accessibility Rule (Very Important)

Every input must have a label

Screen readers rely on labels to guide users.

3. Bootstrap Forms – Why Use Them?

Problems with Plain HTML Forms

No consistent spacing

Poor alignment

Not responsive

No visual feedback

Bootstrap Solves This By:

Providing predefined classes

Ensuring mobile responsiveness

Improving visual hierarchy

Making forms accessible by default

4. Bootstrap Form Structure (Core Concept)

Basic Bootstrap Form Template

<form> <div class="mb-3"> <label class="form-label" for="email">Email address</label> <input type="email" class="form-control" id="email"> </div> </form>

Explanation 

mb-3 → Adds spacing between form elements

form-label → Styles label properly

               

form-control → Makes input full-width & styled

type="email" → Enables validation

5. Input Types 

Common Input Types

Type

Use Case

text

Names, usernames

email

Email addresses

password

Secure text

number

Age, quantity

tel

Phone number

date

Date selection

Example with Multiple Inputs

<div class="mb-3"> <label class="form-label" for="name">Full Name</label> <input type="text" class="form-control" id="name"> </div> <div class="mb-3"> <label class="form-label" for="password">Password</label> <input type="password" class="form-control" id="password"> </div>

🧠 Coding Specialist Tip

Always choose the correct input type

Mobile browsers optimize keyboards automatically

6. Labels (Research Based)

Why Labels Are Mandatory

Placeholder-only forms reduce usability

Labels improve form accuracy by 22%

Correct Label Usage

<label for="email" class="form-label">Email</label> <input type="email" id="email" class="form-control">

❌ Bad 

<input placeholder="Enter Email">

✔ Good 

Label always visible

Placeholder optional (hint only)

7. Placeholder vs Label (Concept Clarity)

Feature

Label

Placeholder

Accessibility

✔ Required

❌ Not enough

Visibility

Always visible

Disappears

UX Quality

High

Medium

                 

👉 Rule: Use both, but never placeholder alone.

8. Example – Contact Form

<form> <div class="mb-3"> <label class="form-label" for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="mb-3"> <label class="form-label" for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <div class="mb-3"> <label class="form-label" for="message">Message</label> <input type="text" class="form-control" id="message"> </div> </form>

9. Exercises 

Exercise 1: Login Form

Create Email + Password fields

Use proper labels

Use Bootstrap classes

💡 Learning Outcome:

Input types

Label binding

Spacing

Exercise 2: Registration Form

Fields:

Name

Email

Password

Confirm Password

🧠 Focus:

Input grouping

UX clarity

Exercise 3: Accessibility Check

Ask:

Does every input have a label?

Is it for matching id?

Is the input type correct?

10. Step-by-Step Flow

importance

               

Show HTML form

Identify problems

Introduce Bootstrap solution

Build form live (coding demo)

Assign exercises

🎯 This method increases retention & confidence

11. Coding Specialist 

Google Material Design → Always visible labels

Bootstrap Docs → .form-control standard

WCAG Accessibility → Labels mandatory

Performance Insight

Clean form structure improves maintainability

Correct inputs reduce JS validation load

12. Summary 

Forms are core to web apps

Labels are not optional

Inputs must match data type

Bootstrap simplifies form design

Good forms = better UX + conversions

13. Create a User Profile Form

Name

Email

Phone

Password

✔ Must use:

form-label

form-control

Proper spacing

Accessibility rules