Lecture 8: CSS Box Model, Float/Clear, Bootstrap & Revision

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-05

Lecture 8

CSS Box Model, Float/Clear, Bootstrap & Revision

Week 2 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Outcomes

After this lecture, students will be able to:

explain form structure and the GET vs POST methods
apply all major HTML5 input types correctly
use labels and fieldsets for accessible forms
apply HTML5 client-side validation attributes
design a complete contact or registration form

Prerequisites

HTML structure and semantic markup
Familiarity with classes and ids in HTML
Basic editor and browser preview usage

Syllabus Mapping

Syllabus mapping:

form element: action, method, name attributes
input types: text, password, email, number, date, radio, checkbox, file
select and textarea elements
label, fieldset, and legend for grouping
HTML5 validation: required, min, max, pattern, placeholder

Prerequisites used:

HTML structure from Lectures 3-7
understanding of elements and attributes

Agenda

Introduction and motivation
Form element structure
GET vs POST methods
Input types: text, password, email, date, number
Radio buttons, checkboxes, select, textarea
Labels and fieldset/legend grouping
HTML5 validation attributes
Summary and exam preparation

Introduction and Motivation

Every login, search, registration, checkout, and contact form on the web is an HTML form.
Forms are the primary mechanism for user interaction and data collection on websites.
A form without proper labels is inaccessible to millions of users with disabilities.
HTML5 introduced powerful built-in input types and validation that eliminate simple JavaScript checks.
Understanding forms properly connects frontend HTML to backend server processing and databases.

Think About It - Interactive Questions

Before we dive into details, think about these:

When you search on Google and press Enter, how does your text reach Google’s server?
What happens if a form has no name attributes on its inputs?
Why do some forms show your password as dots instead of letters?
What is the difference between a form using GET vs POST when you submit a login form?

How HTML Forms Work

flowchart LR
  U(["User fills form"])
  B["Browser collects\nform data"]
  R{"GET or POST?"}
  G["Data in URL\n?key=value"]
  P["Data in\nrequest body"]
  S[("Server\nprocesses")]
  U --> B --> R
  R -->|GET| G --> S
  R -->|POST| P --> S

GET: data visible in URL - use for search queries, not sensitive data
POST: data in request body - use for login, registration, file uploads

The Form Element

<form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <button type="submit">Submit</button>
</form>

Key attributes:

action -> URL where form data is sent on submit
method -> GET or POST (how data is sent)
name -> identifies the form (important for JavaScript)
Every input needs a name attribute or it won’t be sent to the server

GET vs POST: When to Use Each

GET Method

Data appended to URL
Visible in browser address bar
Bookmarkable and shareable
Limited data size (~2KB)
Use for: search, filters, navigation
Example: ?query=html+forms

POST Method

Data in HTTP request body
Not visible in address bar
Not bookmarkable
Supports large data and files
Use for: login, registration, upload
Example: password, credit card data

Text-Based Input Types

<input type="text"     name="name"      placeholder="Your full name">

<input type="password" name="pwd"       placeholder="Enter password">

<input type="email"    name="email"     placeholder="you@example.com">

<input type="search"   name="q"         placeholder="Search...">

<input type="url"      name="website"   placeholder="https://...">

<input type="tel"      name="phone"     placeholder="+91 ...">

Each type provides built-in validation and mobile keyboard optimization

Number, Date, and Range Inputs

<input type="number" name="age"      min="18" max="100" step="1">

<input type="date"   name="dob"      min="1900-01-01" max="2026-12-31">

<input type="time"   name="appt"     min="09:00" max="17:00">

<input type="range"  name="rating"   min="1" max="10" value="5">

<input type="color"  name="theme">

min and max set acceptable range for numbers and dates
step controls increment (default 1 for numbers)
range renders as a draggable slider

Radio Buttons & Checkboxes

Radio buttons (pick ONE):

<input type="radio" name="gender" value="male" id="m">   <label for="m">Male</label>
<input type="radio" name="gender" value="female" id="f"> <label for="f">Female</label>
<input type="radio" name="gender" value="other" id="o">  <label for="o">Other</label>

Checkboxes (pick MULTIPLE):

<input type="checkbox" name="skills" value="html" id="h"> <label for="h">HTML</label>
<input type="checkbox" name="skills" value="css"  id="c"> <label for="c">CSS</label>
<input type="checkbox" name="skills" value="js"   id="j"> <label for="j">JavaScript</label>

Same name attribute groups radio buttons so only one can be selected

Dropdown Select & Textarea

Select dropdown:

<select name="country" id="country">
    <option value="">-- Choose country --</option>
    <option value="in">India</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
</select>

Multi-line textarea:

<textarea name="message" id="message" rows="5" cols="40"
          placeholder="Type your message here...">
</textarea>

Label Element - Why It Matters

Without label (bad):

Name: <input type="text">

Screen readers cannot link text to input
Clicking “Name” doesn’t focus the input

With label (correct):

<label for="name">Name:</label>
<input type="text" id="name"
       name="name">

Screen reader reads label when input focused
Clicking “Name” focuses the input field

Rule: Every form input must have an associated <label> - for on label must match id on input

Grouping with Fieldset & Legend

<form action="/register" method="POST">
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </fieldset>

    <fieldset>
        <legend>Account Security</legend>
        <label for="pwd">Password:</label>
        <input type="password" id="pwd" name="password" minlength="8" required>
    </fieldset>

    <button type="submit">Create Account</button>
</form>

HTML5 Client-Side Validation

<input type="text"  required>                    <!-- Cannot be empty -->

<input type="email" required>                    <!-- Must match email format -->

<input type="text"  minlength="3" maxlength="20"> <!-- Length constraints -->

<input type="number" min="1" max="100">          <!-- Range constraints -->

<input type="text"  pattern="[A-Z]{3}[0-9]{4}"> <!-- Custom regex pattern -->

<input type="text"  placeholder="Enter code..."> <!-- Hint text -->

Built-in validation runs before the form submits - no JavaScript required for basic checks!

Complete Registration Form

<form action="/register" method="POST">
    <fieldset>
        <legend>Personal Details</legend>
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="firstname" required minlength="2">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="gender">Gender:</label>
        <input type="radio" name="gender" value="m" id="gm"> <label for="gm">Male</label>
        <input type="radio" name="gender" value="f" id="gf"> <label for="gf">Female</label>
    </fieldset>
    <button type="submit">Register</button>
    <button type="reset">Clear Form</button>
</form>

HTML Form Best Practices

Always use labels -> every input needs a connected <label> with matching for/id
Use semantic structure -> <fieldset> and <legend> group related fields
Choose correct input type -> email, number, date provide built-in validation and mobile keyboards
Add name attributes -> inputs without name are not submitted to the server
Provide placeholder text -> hints help users understand expected format
Use required attribute -> marks fields that cannot be left blank
Test on mobile -> forms are most frequently completed on smartphones

Memory Booster: Forms as Paper Documents

Think of an HTML form like a paper application form:

<form> = The entire application form document
action = The address you mail the form to
method = POST (sealed envelope) vs GET (postcard - contents visible)
<input type="text"> = Blank line to write your name/address
<input type="radio"> = Tick box where you circle ONE answer
<input type="checkbox"> = Check all that apply boxes
<select> = Multiple choice dropdown list
<label> = The printed question (“Name:”, “Gender:”, “Email:”)
required = The red asterisk * marking mandatory fields

Live Demo: HTML Forms Explorer

Interactive demonstration of all form elements and validation:

?? Open Interactive Demo: HTML Forms & Form Elements

What you’ll see:

All major input types rendered and interactive
Radio vs checkbox behavior comparison
Label/input linking demonstration
Fieldset grouping for logical form sections
HTML5 validation in action (required, pattern, email)
Form submission data preview (GET vs POST)

?? Key insight: Open DevTools Network tab and submit the form to see what data is actually sent!

Resources & References

Structured Debug Checklist for Forms

When form data is not sent:

verify action and method attributes on <form>
check every input has a name attribute
confirm type="submit" on the submit button
inspect DevTools Network tab after clicking submit
check for JavaScript errors blocking submission

When validation does not work:

verify required is placed on the input element
check pattern value is valid regex
confirm min/max types match the input type
test in a different browser (some attributes differ)

Summary

After this lecture, you should understand:

<form> element with action, method, and name
GET vs POST: when and why to use each
All major input types and their built-in behavior
Radio buttons, checkboxes, select, textarea
Labels and fieldset/legend for accessible grouping
HTML5 validation: required, min, max, pattern, placeholder

Exam Preparation Questions: Short

What is the purpose of the <form> element?
What is the difference between GET and POST method?
Why is the name attribute important in form inputs?
What is the role of <label> in accessibility?
What is <fieldset> used for?
Name four common HTML5 input types.
What does the required attribute do?
What is the placeholder attribute?

Exam Preparation Questions: Long

Explain complete HTML form structure with a registration example.
Differentiate GET and POST with practical scenarios.
Explain all major input types with examples and use cases.
Discuss HTML5 form validation attributes and their behaviour.
Design an accessible contact form using labels, fieldset, and validation.

Practice Task

create a complete registration form with at least 6 different input types
group fields using <fieldset> and <legend>
add proper <label> for every input using for/id linking
apply required, minlength, and placeholder attributes
test form submission and inspect submitted data in DevTools

Checklist

Can you:

create a complete semantic and accessible HTML form?
choose the right input type for each data field?
explain GET and POST method differences?
apply HTML5 validation attributes correctly?
answer short and long exam questions?

Next Lecture

Topic: Introduction to CSS
Preparation required: revise HTML structure, classes, and ids from all previous lectures

CSS Box Model, Float/Clear, Bootstrap & Revision

Next: Week 3 - Introduction to CSS