Chapter 10 — Forms & User Input

Learning Outcome

Create interactive forms with various input types, labels, and HTML5 validation.

← 09 - Tables | Next → 11 - Layout Basics

10.1 The `<form>` Tag

<form> is the container for all input elements. It defines where and how the data is sent.

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

Key Attributes

GET vs POST

Always Use POST for Sensitive Data

Passwords, emails, and personal data must use method="POST". With GET, data appears in the URL and browser history.

10.2 The `<input>` Tag — All Types

<input> is a void (self-closing) element. The type attribute determines its behaviour.

<!-- Text types -->
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="tel">
<input type="url">
<input type="search">

<!-- Date/Time types -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

<!-- Selection types -->
<input type="checkbox">
<input type="radio">
<input type="range">
<input type="color">

<!-- File & Hidden -->
<input type="file">
<input type="hidden">

<!-- Button types -->
<input type="submit">
<input type="reset">
<input type="button">

10.3 `<label>` — Accessible Form Labels

Always link labels to inputs using for + id. Clicking the label focuses the input.

<!-- Method 1: for/id pairing (recommended) -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Method 2: wrapping (implicit label) -->
<label>
  Username:
  <input type="text" name="username">
</label>

Why Labels Matter

Clicking the label text focuses the input — larger click target on mobile
Screen readers announce the label when the input is focused
Without labels, form inputs are inaccessible to blind users

10.4 Radio Buttons & Checkboxes

<!-- Radio: choose ONE from a group — same name attribute -->
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

<!-- Checkbox: choose MULTIPLE — can be independently ticked -->
<p>Skills:</p>
<input type="checkbox" id="html" name="skills" value="html" checked>
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>

<input type="checkbox" id="js" name="skills" value="js">
<label for="js">JavaScript</label>

Radio vs Checkbox

Radio — grouped by the same name. Selecting one deselects others.
Checkbox — each is independent. Can check as many as you want.

10.5 Textarea & Select

<!-- Multi-line text input -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"
  placeholder="Write your message here..."
  maxlength="500"></textarea>

<!-- Dropdown select -->
<label for="course">Course:</label>
<select id="course" name="course">
  <option value="">-- Choose a course --</option>
  <optgroup label="Web Development">
    <option value="html">HTML & CSS</option>
    <option value="js">JavaScript</option>
    <option value="react" selected>React</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
  </optgroup>
</select>

<!-- Multi-select (hold Ctrl/Cmd to pick multiple) -->
<select name="languages" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

10.6 Grouping with `<fieldset>` and `<legend>`

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" required>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" required>
  </fieldset>

  <fieldset>
    <legend>Account Details</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass" required>
  </fieldset>
</form>

10.7 HTML5 Form Validation

Built-in validation — no JavaScript needed.

<form>
  <!-- Required field -->
  <input type="text" name="name" required placeholder="Full name">

  <!-- Email format validation -->
  <input type="email" name="email" required placeholder="example@email.com">

  <!-- Number range -->
  <input type="number" name="age" min="18" max="100" required>

  <!-- Text length -->
  <input type="text" name="username" minlength="3" maxlength="20" required>

  <!-- Pattern (regex) validation -->
  <input type="text" name="postcode"
    pattern="[0-9]{6}"
    title="6-digit PIN code"
    placeholder="PIN Code">

  <!-- Strong password (uppercase + lowercase + digit + 8 chars) -->
  <input type="password" name="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Must be 8+ chars with uppercase, lowercase, and number"
    required>

  <button type="submit">Register</button>
  <button type="reset">Clear</button>
</form>

Validation Attributes Summary

10.8 Full Registration Form Example

<form action="/register" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>Personal Details</legend>

    <label for="name">Full Name *</label>
    <input type="text" id="name" name="name" required
      minlength="3" maxlength="50" placeholder="Arjun Kumar">

    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required placeholder="arjun@example.com">

    <label for="dob">Date of Birth *</label>
    <input type="date" id="dob" name="dob" required max="2007-12-31">

    <p>Gender *</p>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
  </fieldset>

  <fieldset>
    <legend>Account Setup</legend>

    <label for="password">Password *</label>
    <input type="password" id="password" name="password"
      required minlength="8"
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
      title="8+ chars with uppercase, lowercase, and number">

    <label for="photo">Profile Photo</label>
    <input type="file" id="photo" name="photo" accept="image/*">
  </fieldset>

  <input type="checkbox" id="terms" name="terms" required>
  <label for="terms">I agree to the <a href="/terms">Terms & Conditions</a></label>

  <button type="submit">Create Account</button>
  <button type="reset">Reset Form</button>
</form>

🚀 Recommended Projects

Project 1 — Student Registration Form

Build a complete student registration form with:

Name, email, password (with pattern validation)
Date of birth (<input type="date">)
Gender (radio buttons)
Course selection (<select> with <optgroup>)
Profile photo upload (<input type="file">)
Terms checkbox
Submit and Reset buttons
Use <fieldset> to group sections

Project 2 — Job Application Form

Create a job application with sections grouped by <fieldset>:

Personal info (name, email, phone, address)
Education (degree select, year, percentage)
Skills (checkboxes for multiple skills)
Cover letter (<textarea>)
Resume upload (<input type="file" accept=".pdf">)

📌 Quick Recall

<form action="..." method="POST"> = container, defines submit destination
GET = data in URL (search) | POST = hidden (login, register)
<input type="..."> = void element, type determines behaviour
name attribute = required for form submission (the data key)
<label for="id"> = always link labels to inputs (accessibility!)
Radio = same name, pick one | Checkbox = independent, pick many
<select> + <option> + <optgroup> = dropdown
<textarea> = multi-line text
<fieldset> + <legend> = group related fields
required, min, max, pattern, minlength = HTML5 validation