Bootstrap Module 35

  Module 35 : Input Groups & Floating Labels 

1. Input Groups – Concept & Purpose

What is an Input Group?

An Input Group allows you to attach text, icons, buttons, or dropdowns before or after an input field.

Why Input Groups Are Important

Improve clarity of input purpose

Reduce form clutter

Enhance user example (UX)

Ideal for:

                

Currency inputs

Search bars

Username/email fields

verification inputs

2. Structure of Input Groups

Basic Syntax

<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username"> </div>

Key Components

Component

Description

input-group

Wrapper container

input-group-text

Text, icons, or symbols

form-control

Input field

3. Input Group Examples

Example 1: Email Input

<div class="input-group mb-3"> <span class="input-group-text">@</span> <input type="email" class="form-control" placeholder="Email address"> </div>

Explanation:

@ symbol tells the user it’s an email

Reduces confusion

Improves form speed

Example 2: Currency Input

<div class="input-group mb-3"> <span class="input-group-text">₹</span> <input type="number" class="form-control" placeholder="Amount"> </div>

Use Case:

E-commerce checkout, payment forms, invoices

Example 3: Button Inside Input Group

<div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <button class="btn btn-primary">Search</button> </div>

Use Case:

Search bars, filters, dashboards

4. Floating Labels – Concept & Purpose

What Are Floating Labels?

Floating labels are labels that start inside the input field and move upward when the user types.

Why Floating Labels Matter

Saves space

Cleaner UI

Better mobile experience

Avoids placeholder-only issues

5. Floating Labels – Basic Structure

Syntax

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

Important Rules

placeholder is mandatory (even if empty)

Label must come after input

Works best with text-based inputs

6. Floating Label Examples

Example 1: Login Form

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

UX Benefit:

Label is always visible

No confusion after typing

7. Combining Input Groups with Floating Labels

Advanced Example

<div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="text" class="form-control" id="username" placeholder="Username"> <label for="username">Username</label> </div> </div>

Explanation

Input Group provides context (@)

Floating Label provides clarity

Works well for modern login/signup forms

8. Accessibility 

✔ Always use <label>

✔ Use meaningful placeholders

✔ Avoid icons without text for screen readers

✔ Maintain proper contrast

Accessibility Tip

<label for="email" class="visually-hidden">Email</label>

9. Exercises

Exercise 1

Create a registration form with:

Name (Floating Label)

Email (Input Group with @)

Password (Floating Label)

Exercise 2

Create a payment form with:

Currency symbol

Amount input

Submit button inside input group

10. Title: Designing a Professional Login Form

Objective

Build a responsive login form using Input Groups & Floating Labels.

Steps

Include Bootstrap CDN

Create container and card

Add floating label inputs

Add input group icons

Test responsiveness

Code

<div class="container mt-5"> <div class="card p-4"> <h3 class="mb-3">Login</h3> <div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="email" class="form-control" id="loginEmail" placeholder="Email"> <label for="loginEmail">Email</label> </div> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="loginPass" placeholder="Password"> <label for="loginPass">Password</label> </div> <button class="btn btn-primary w-100">Login</button> </div> </div>

Expected Output

Clean modern UI

Responsive layout

User-friendly interaction

11. Research 

UI/UX Insights

Floating labels reduce form abandonment by up to 20%

Input groups improve form completion speed

Clear context reduces validation errors

Technical Research Areas

Bootstrap form rendering behavior

CSS positioning of floating labels

ARIA roles and accessibility testing

Comparison with Material UI forms

Advanced Research 

🔍 Compare:

Bootstrap Floating Labels

Material Design Floating Labels

Custom CSS solutions

Document:

Performance

Accessibility

Browser compatibility

Summary

Input Groups enhance context

Floating Labels improve clarity

Combined usage creates professional UI

Bootstrap simplifies complex form design

Essential skill for modern frontend developers

#Web Stories

 

Assignment Forms Validation & Custom Controls

 Assignment: Forms – Validation & Custom Controls.

Create a Responsive Registration Form with Validation & Custom Controls.

 Assignment Description

Design and develop a Registration Form using Bootstrap.

The form must include built-in Bootstrap validation, custom-styled controls, and JavaScript validation logic.

 Tasks

🔹 Task 1: Form Layout (Bootstrap)

Create a responsive form using Bootstrap grid system with the following fields:

Full Name

Email Address

Password

Confirm Password

Mobile Number

Gender (Radio Buttons)

Skills (Checkboxes – minimum 3)

Country (Dropdown)

Agree to Terms & Conditions (Checkbox)

Submit Button

Reset Button

✔ Use Bootstrap classes like:

form-control, form-check, form-check-input, form-label, btn

🔹 Task 2: Form Validation

Apply the following validation rules:

Full Name → Required, minimum 3 characters

Email → Must be valid email format

Password → Minimum 8 characters

Confirm Password → Must match password

Mobile Number → Exactly 10 digits

Gender → Required

Skills → At least one must be selected

Country → Must select a valid option

Terms & Conditions → Must be checked

✔ Use:

Bootstrap validation classes (is-valid, is-invalid)

HTML5 validation attributes

JavaScript validation for at least 3 fields

🔹 Task 3: Custom Controls

Customize the following using Bootstrap & CSS:

Styled radio buttons

Styled checkboxes

Custom submit button

Input focus effects

Validation error messages

✔ Error messages must be shown using:

.invalid-feedback

.valid-feedback

______________________________________________

📂 Submission Files

Students must submit:

                   👩‍🎓

index.html

style.css (optional customization)

script.js

Screenshots:

Empty form

Validation errors

Successful submission

📊 Marks Distribution

Criteria

Marks

Bootstrap Form Layout

20

Validation Rules

30

Custom Controls Styling

20

JavaScript Logic

20

UI & Responsiveness

10

Total

100

Complete This Assignments And Send It To me  

Authentic 🥘

 

Bootstrap Module 34 Partical View

 

#Online Courses

 Bootstrap Module 34

If You want To Earn Certificate For My  All   Course Then Contact Me At My  Contact  Page   then I Will Take A Test And  Give You  certificate  . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page 

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Quran E Kareem Jumma Mubarak 🧕

 

Bootstrap Module 34

 

#Online Courses

 Bootstrap Module 34

If You want To Earn Certificate For My  All   Course Then Contact Me At My  Contact  Page   then I Will Take A Test And  Give You  certificate  . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page 

https://onlinecourses2024for.blogspot.com/p/contact-us.html

Bootstrap Module 34

  Module 34 Forms – Validation & Custom Controls. 

1. Understanding Forms in Bootstrap

What is a Form?

A form is a structured set of input controls used to collect data from users.

               

Common form elements:

Text inputs

Email fields

Passwords

Checkboxes

Radio buttons

Select dropdowns

File uploads

Bootstrap provides pre-styled form that improve:

Consistency

Responsiveness

Accessibility

Validation feedback

2. Bootstrap Form Validation – Concept

What is Form Validation?

Form validation ensures:

Correct data format

Required fields are filled

Invalid data is rejected before submission

Types of Validation

Client-side validation

Runs in the browser

Faster feedback

Uses HTML5 + Bootstrap + JavaScript

Server-side validation

Runs on the server

More secure

Outside Bootstrap’s scope but complements it

3. Bootstrap Validation 

Bootstrap builds on HTML5 validation using CSS classes:

Class

Purpose

.needs-validation

Activates Bootstrap validation

.was-validated

Shows validation results

.is-valid

Marks valid input

.is-invalid

Marks invalid input

.valid-feedback

Success message

.invalid-feedback

Error message

👉 Bootstrap does not validate automatically – you must trigger it using JavaScript.

4. Basic Form Validation

Step 1: HTML Form Structure

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

Explanation

required → HTML5 validation rule

novalidate → disables browser default validation UI

.invalid-feedback → Bootstrap error message container

Step 2: JavaScript to Activate Validation

<script> (() => { 'use strict'; const forms = document.querySelectorAll('.needs-validation'); Array.from(forms).forEach(form => { form.addEventListener('submit', event => { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); })(); </script>

Deep Explanation

checkValidity() → checks all form fields

preventDefault() → stops form submission

.was-validated → triggers Bootstrap validation styles

5. Validation States – Visual Feedback

Valid State

<input type="text" class="form-control is-valid"> <div class="valid-feedback"> Looks good! </div>

Invalid State

<input type="text" class="form-control is-invalid"> <div class="invalid-feedback"> This field is required. </div>

 Tip

 how visual cues (green/red borders) improve UX and reduce form abandonment.

6. Custom Form Controls 

Why Custom Controls?

Default browser controls:

Look different across browsers

Offer limited styling

Bootstrap custom controls provide:

Uniform design

Better accessibility

Mobile-friendly UI

7. Custom Checkboxes & Radios

Custom Checkbox

<div class="form-check"> <input class="form-check-input" type="checkbox" id="terms" required> <label class="form-check-label" for="terms"> Accept Terms & Conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div>

Explanation

.form-check → wrapper

.form-check-input → input styling

.form-check-label → clickable label

Custom Radio Buttons

<div class="form-check"> <input class="form-check-input" type="radio" name="gender" required> <label class="form-check-label">Male</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender"> <label class="form-check-label">Female</label> </div>

8. Custom Select Dropdown

<select class="form-select" required> <option value="">Choose a country</option> <option>India</option> <option>USA</option> <option>UK</option> </select> <div class="invalid-feedback"> Please select a country. </div>

Key Difference

.form-select replaces default <select> styling

Fully responsive and keyboard-accessible

9. Custom Switches (Modern UI)

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="notify"> <label class="form-check-label" for="notify"> Enable Notifications </label> </div>

Use Case

Settings panels

Mobile-first designs

Toggle features

10. Registration Form

Features Included

Email validation

Password required

Terms checkbox

Bootstrap validation feedback

<form class="needs-validation" novalidate> <input type="email" class="form-control mb-3" placeholder="Email" required> <input type="password" class="form-control mb-3" placeholder="Password" required> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" required> <label class="form-check-label">Agree to terms</label> <div class="invalid-feedback">Required</div> </div> <button class="btn btn-success">Register</button> </form>

11. Exercises 

Exercise 1 

Create a login form with:

Email

Password

Validation messages

Exercise 2 

Build a feedback form with:

Textarea

Rating (radio buttons)

Submit validation

Exercise 3 

Create a multi-step form:

Step 1: Personal info

Step 2: Preferences

Step 3: Confirmation

12. Research 

UX Insights

Forms with inline validation reduce errors by 22%

Clear feedback improves completion rates

Minimal required fields = better conversion

Accessibility 

Always use <label>

Ensure keyboard navigation

Use .invalid-feedback for screen readers

Industry Usage

Bootstrap validation is widely used in:

Admin dashboards

E-commerce checkouts

SaaS onboarding forms

13. Common Mistakes 

❌ Forgetting novalidate

❌ No feedback messages

❌ Over-validating simple forms

❌ Ignoring mobile usability

Summary

Bootstrap validation enhances UX + data quality

                

Custom controls provide professional UI

JavaScript enables feedback

Accessibility and consistency are key goals

Important Of Digital

 

Assignment: Dropdowns & Menus (Bootstrap)

 Assignment: Dropdowns & Menus (Bootstrap)

Task 1: Dropdown Inside a Navbar

Create a responsive navigation bar.

Add a dropdown menu inside the navbar.

The navbar should collapse into a hamburger menu on smaller screens.

The dropdown should work correctly in both desktop and mobile views.

Expected Outcome:

A fully responsive navbar with a working dropdown.

Task 2: Custom Styling

Change the default appearance of the dropdown menu using CSS:

              

Background color

Text color

Hover effect

Ensure the dropdown remains readable and visually balanced.

Expected Outcome:

A customized dropdown menu that still follows good.

Task 3: Dropdown Alignment & Direction

Create:

One right-aligned dropdown

One dropup

Demonstrate how dropdown direction affects user experience.

Expected Outcome:

Properly aligned dropdowns using Bootstrap classes.

Task 4: Accessibility & Usability

Ensure proper use of:

aria-expanded

aria-labelledby

Make sure the dropdown is keyboard accessible.

Add accessibility is important in menus.

______________________________________________

Submission 👩‍🏫

Submit:

HTML file

CSS file (if used)

Include screenshots of:

Desktop view

Mobile view

Add a short explanation (100–150 words) describing:

Challenges faced

What you learned from this assignment

Evaluation Criteria

Criteria

Marks

Correct use of Bootstrap dropdowns

30

Responsiveness

20

Custom styling

20

Accessibility implementation

20

Code structure & clarity

10

Total

100

Complete This Assignment And Submit To Me