Forms as Communication

"Forms are how users talk to servers."

"Every login, signup, search, payment = form submission."

What Are Forms Used For?

Authentication - Login, signup, password reset
Search - Google, Amazon, YouTube search bars
Data Entry - Registration, profiles, surveys
E-commerce - Checkout, payment, shipping info
Communication - Contact forms, comments, feedback

The Restaurant Order Slip Analogy

Form Element	Order Slip Equivalent
`<form>`	The order slip itself
Input fields	Lines to fill (Starter: ___, Main: ___)
Required fields	Items marked with asterisk *
Submit button	Handing slip to waiter
Server processing	Kitchen reading and cooking
Validation	"Sorry, we're out of paneer"

Unit I Completion: This is the final week of HTML. After this, we move to CSS!

The Form Element

Basic Structure

<form action="/submit" method="POST">
    <!-- form controls go here -->
    <button type="submit">Submit</button>
</form>

Form Attributes

Attribute	Purpose	Example
`action`	Where to send data	`"/api/register"`
`method`	How to send (GET/POST)	`"POST"`
`enctype`	Encoding type	`"multipart/form-data"` for files
`autocomplete`	Browser autofill	`"on"` or `"off"`
`novalidate`	Skip validation	(boolean attribute)

Forms Work Without JavaScript!

When you click submit:

Browser collects all input values
Browser sends HTTP request to action URL
Server processes and responds
Browser shows new page (or same page with results)

This is the same request-response model from Week 01!

Text Input Types

Basic Text Inputs

Type	Use Case	Special Behavior
`text`	Generic single-line text	None
`password`	Passwords	Hides characters
`email`	Email addresses	Validates email format
`tel`	Phone numbers	Shows number pad on mobile
`url`	Website URLs	Validates URL format
`search`	Search queries	May show clear button

Number Inputs

<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">

Date/Time Inputs

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

Mobile Benefit: Using the right input type shows the appropriate keyboard on mobile devices!

Selection Inputs

Checkboxes (Multiple Selection)

<label>
    <input type="checkbox" name="interests" value="html">
    HTML
</label>
<label>
    <input type="checkbox" name="interests" value="css">
    CSS
</label>
<label>
    <input type="checkbox" name="interests" value="js">
    JavaScript
</label>

Radio Buttons (Single Selection)

<label>
    <input type="radio" name="gender" value="male">
    Male
</label>
<label>
    <input type="radio" name="gender" value="female">
    Female
</label>
<label>
    <input type="radio" name="gender" value="other">
    Other
</label>

Key Difference:

Checkboxes: Each has unique or same name, multiple can be selected
Radio: Same name = same group, only ONE can be selected

Other Input Types

<input type="file" accept=".pdf,.doc">
<input type="hidden" name="user_id" value="123">
<input type="color" value="#ff0000">

Labels & Accessibility

Never skip labels! They are not optional.

Why Labels Matter

Clickable area - Clicking label focuses the input
Screen readers - Announce what the field is for
Mobile users - Larger tap target

Two Ways to Associate Labels

Explicit (Preferred)

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

for matches id

Implicit

<label>
    Email:
    <input type="email">
</label>

Input nested inside label

The OTP Problem

Ever tried tapping a tiny OTP box on mobile?

With a proper label, the entire "Enter OTP" text becomes tappable!

Small HTML improvement = big usability gain

Select, Textarea & Grouping

Dropdown Select

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">-- Select Country --</option>
    <option value="in">India</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
</select>

Option Groups

<select name="car">
    <optgroup label="Indian">
        <option>Tata</option>
        <option>Mahindra</option>
    </optgroup>
    <optgroup label="Japanese">
        <option>Toyota</option>
        <option>Honda</option>
    </optgroup>
</select>

Textarea

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

Fieldset & Legend

<fieldset>
    <legend>Personal Information</legend>
    <label>Name: <input type="text" name="name"></label>
    <label>Email: <input type="email" name="email"></label>
</fieldset>

<fieldset> groups related inputs. <legend> describes the group. Great for accessibility!

HTML5 Validation Attributes

Built-in Validation (No JavaScript!)

Attribute	Purpose	Example
`required`	Must be filled	`<input required>`
`minlength`	Minimum characters	`minlength="8"`
`maxlength`	Maximum characters	`maxlength="100"`
`min`	Minimum value	`min="18"`
`max`	Maximum value	`max="120"`
`pattern`	Regex pattern	`pattern="[A-Za-z]+"`
`placeholder`	Hint text	`placeholder="Enter email"`

Example with Validation

<input type="text" name="username"
    required
    minlength="3"
    maxlength="20"
    pattern="[a-z0-9_]+"
    placeholder="username (lowercase, numbers, _)">

Important: Placeholder is NOT a replacement for label!

Placeholder disappears when typing
Screen readers may not announce placeholders
Always use <label> for accessibility

How Form Data Flows

This is the same request-response model from Week 01!

The Complete Journey

User fills form and clicks Submit
Browser collects all named inputs
Browser sends HTTP request to action URL
Server receives data and processes it
Server sends response (success page, error, redirect)
Browser displays the response

What Gets Sent?

<form action="/register" method="POST">
    <input name="username" value="john">
    <input name="email" value="john@example.com">
    <button type="submit">Register</button>
</form>

// Browser sends:
// POST /register
// Content-Type: application/x-www-form-urlencoded
//
// username=john&email=john%40example.com

Only named inputs are sent! Inputs without name attribute are ignored.

GET vs POST

Aspect	GET	POST
Data location	In URL (visible)	In request body (hidden)
Bookmarkable	Yes	No
Cacheable	Yes	No
Length limit	~2000 chars (URL limit)	No practical limit
Security	Less secure (in URL)	More secure (in body)
Use for	Searching, filtering	Creating, updating, deleting

GET Example

<form action="/search" method="GET">
    <input name="q" value="javascript">
</form>

// URL becomes: /search?q=javascript
// You can bookmark and share this URL!

POST Example

<form action="/login" method="POST">
    <input name="password" type="password">
</form>

// Password is in request body, NOT in URL
// Can't bookmark login (good!)

Rule of thumb: GET for reading, POST for writing.

Exercises

Exercise 1: Complete Registration Form

Create a registration form with:

Name, email, password, confirm password
Date of birth (date input)
Gender (radio buttons)
Interests (checkboxes)
Bio (textarea)
Profile picture (file upload)
Terms agreement checkbox
Proper validation attributes

Solution: examples/01-registration.html

Exercise 2: Contact Form

Create a contact form with:

Name, email
Subject (dropdown)
Priority (range slider)
Message (textarea)

Solution: examples/02-contact.html

Exercise 3: Job Application

Create a job application form with fieldsets and file upload.

Solution: examples/03-job-application.html

Semester Project: CampusKart

"One project. 13 weeks. From a plain HTML page to a deployed full-stack application."

What is CampusKart?

A campus marketplace where students can buy and sell used textbooks, gadgets, notes, and lab equipment. You will build this from scratch — and by Week 15, it will be a deployed, full-stack web application on your GitHub.

How It Evolves

Weeks 3-6: Build the frontend (HTML + CSS)
Weeks 7-9: Make it interactive (JavaScript)
Weeks 10-12: Build the backend (Node.js + MySQL)
Weeks 13-15: Connect everything + deploy

Why This Matters

Portfolio-worthy project for placements
GitHub repo with 13 weeks of commit history
Real-world skills: HTML, CSS, JS, Node.js, MySQL
Demo Day in Week 15 — showcase your work

Alternative themes: StudyBuddy (study partners), EventHub (campus events), FoodieTrack (canteen reviews), ProjectBoard (project showcase). Pick your theme — the milestones stay the same!

Week 3 Milestone: CampusKart Forms

Deliverable: listing.html + register.html

Product Listing Form

Title (text, required, min 5 chars)
Description (textarea, min 20 chars)
Price (number, min 0)
Category (select: Textbooks / Electronics / Notes / Lab Equipment)
Condition (radio: New / Good / Fair)
Product image (file upload)
Contact info (email, tel)

User Registration Form

Name, Email, Password
College (select dropdown)
Year (radio: 1st / 2nd / 3rd / 4th)
Phone number
Interests (checkboxes)
Bio (textarea)
Terms checkbox (required)

Push to GitHub! Create a repository, commit your HTML files. This is Week 1 of your portfolio project.

"By Week 15, this form will actually save products to a database and other students can buy them."

Key Takeaways

Form Basics

<form action="" method=""> - Container for inputs
action = where to send, method = GET or POST
Only inputs with name attribute are submitted

Input Types

Text: text, email, password, tel, url
Numbers: number, range
Date/Time: date, time, datetime-local
Selection: checkbox, radio, <select>

Accessibility

Always use labels! Never skip them.
<fieldset> and <legend> for grouping
Placeholder is NOT a label replacement

Unit I Complete! Next week: CSS Fundamentals

Resources

Videos

Web Dev Simplified - HTML Form Validation

Documentation