5. Bootstrap Forms, Floating Labels & Validation

Chapters 23-25: Basic Forms, form-control, form-select, Checkboxes, Input Groups, Floating Labels & Form Validation

Module 1: Form Controls, Selects, Checks & Radios

Styling native HTML inputs, selects, checkboxes, and radio buttons consistently.

🇬🇧 English Definition

Bootstrap form classes (form-control, form-select, form-check-input) apply consistent padding, borders, focus outlines, and full-width layout styling to form controls.

🇮🇳 Hinglish Definition

form-control input fields ko style karta hai. form-select dropdown select ko aur form-check checkboxes ko modern look deta hai.

Core Concepts & Rules

form-control: Styles text inputs, textareas, and file inputs.
form-select: Styles dropdown select elements.
form-check: Wraps checkbox/radio input and label (
).

🔍 Line-by-Line Code Breakdown

Line 1-3:
Email styles text input with vertical spacing.

🎯 Interview Focus & Questions

Q: What is form-control?
A: A Bootstrap class that applies full-width layout, rounded borders, padding, and focus ring styling to form inputs.

💻 Practical Bootstrap Code Example - Form Controls, Selects, Checks & Radios

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email Address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="terms">
    <label class="form-check-label" for="terms">Accept Terms</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

📤 Expected Rendered Result:

Clean form layout with styled text input, custom checkbox, and primary submit button.

Module 2: Input Groups, Floating Labels & Client Validation

Adding input prefixes/suffixes, floating animated labels, and HTML5 validation feedback.

🇬🇧 English Definition

Input Groups prepend or append text/buttons to inputs. Floating Labels animate input labels inside fields. Form Validation presents custom valid/invalid feedback.

🇮🇳 Hinglish Definition

Input group @ ya currency symbols add karne ke kaam aata hai. Floating label field ke andar animates hota hai. Form validation error messages dikhata hai.

Core Concepts & Rules

Input Group:
@
Floating Label:
Name
Validation Feedback:
Please enter a valid value.

🔍 Line-by-Line Code Breakdown

Line 1-3:
wraps input and label for floating animation effect.

🎯 Interview Focus & Questions

Q: What is required for floating labels to work?
A: A placeholder attribute is mandatory on the input control for CSS floating label selector calculation.

💻 Practical Bootstrap Code Example - Input Groups, Floating Labels & Client Validation

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email Address</label>
</div>
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

📤 Expected Rendered Result:

Floating animated label input followed by input group with '@' prefix.