Lecture 8 Demo - HTML Forms & Form Elements

[Classroom Tip] This demo lets you interact with every major HTML input type, see label accessibility in action, explore fieldset/legend grouping, and watch HTML5 validation fire — all without any backend server.

1) Input Types Gallery

All these are just <input> with different type attributes.

type="text" type="email" type="password" type="url" type="tel" type="search"

type="number" (min=0, max=100) type="date" type="range" (min=0, max=10)

5

type="color"

#053660

2) Radio Buttons vs Checkboxes

Radio (one choice only)

<input type="radio" name="level"
  id="r1" value="beginner">
<label for="r1">Beginner</label>

<input type="radio" name="level"
  id="r2" value="advanced">
<label for="r2">Advanced</label>

Beginner Intermediate Advanced

All share the same name — selecting one deselects others.

Checkboxes (multiple choices)

<input type="checkbox" name="topics[]"
  id="c1" value="html">
<label for="c1">HTML</label>

<input type="checkbox" name="topics[]"
  id="c2" value="css">
<label for="c2">CSS</label>

HTML CSS JavaScript

Each checkbox is independent — multiple can be checked simultaneously.

3) Label Accessibility — The Right Way

Always associate a <label> with its input. Click the label text to see the difference.

❌ Bad — no label association:

Username:

Uses <span> instead of <label for="..."> — screen readers can't associate them.

✅ Good — proper label association:

Username: (click me!)

Click the "Username:" label — focus jumps to the input. Works for click targets and screen readers.

4) Fieldset & Legend — Grouping Related Fields

<fieldset>
  <legend>Personal Info</legend>
  <label for="fname">First Name</label>
  <input id="fname" type="text" />
  <label for="lname">Last Name</label>
  <input id="lname" type="text" />
</fieldset>

<fieldset>
  <legend>Course Preferences</legend>
  ...checkboxes...
</fieldset>

Personal Info First Name Last Name

Course Preferences

Morning sessions Lab sessions Online option

5) HTML5 Form Validation — Live Demo

Fill in the fields and click Submit. Browser validation fires without any JavaScript.

6) GET vs POST Methods

GET method:

<form method="GET" action="/search">
  <input type="text" name="q">
</form>

Appends data to URL: /search?q=html
Visible in browser bar — bookmarkable
Use for searches, filters (non-sensitive)
Limited by URL length (~2000 chars)

POST method:

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

Sends data in request body — not in URL
Not visible / not bookmarkable
Use for logins, registrations, payments
No size limit (handles file uploads)