🧱 Phase 1 · HTML 🟢 Beginner MODULE 04

Forms, Tables & Lists

⏱️ 40 min

📖 Theory + Code

🧩 5 Questions

🏗️ 1 Challenge

Phase 1 progress75%

🎯 What you'll learn: All HTML list types (ordered, unordered, description), HTML tables with proper structure and accessibility, and the full form element system — input types, labels, fieldsets, validation attributes, and textarea/select/checkbox/radio. By the end you can build any data entry form.

Section 1

Lists — ul, ol, dl

HTML has three list types. Unordered lists use bullet points for items without a specific order. Ordered lists are numbered. Description lists pair terms with definitions — great for glossaries, FAQs, and metadata.

lists.html

HTML

<!-- Unordered list (bullets) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list (numbered, default 1, 2, 3…) -->
<ol>
  <li>Install VS Code</li>
  <li>Create a new file</li>
  <li>Type your first HTML</li>
</ol>

<!-- Ordered with type and start attributes -->
<ol type="A" start="3">   <!-- C, D, E… -->
  <li>Option C</li>
  <li>Option D</li>
</ol>

<!-- Nested lists -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

<!-- Description list — term + definition pairs -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — structures web content.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — styles and layouts web pages.</dd>
</dl>

Section 2

HTML Tables

Tables are for tabular data — think spreadsheets, schedules, comparison charts. They should never be used for page layout (that's what CSS is for). A well-structured table uses <thead>, <tbody>, <tfoot>, proper <th> headers, and a <caption> for accessibility.

table.html

HTML

<table>
  <!-- Caption: accessible title of the table -->
  <caption>Student Exam Results — Phase 1</caption>

  <!-- thead: column headers -->
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>

  <!-- tbody: data rows -->
  <tbody>
    <tr>
      <th scope="row">Ali Hassan</th>
      <td>88</td>
      <td>92</td>
      <td>A</td>
    </tr>
    <tr>
      <th scope="row">Sara Khan</th>
      <td>95</td>
      <td>98</td>
      <td>A+</td>
    </tr>
  </tbody>

  <!-- tfoot: summary row -->
  <tfoot>
    <tr>
      <th scope="row">Class Average</th>
      <td>91.5</td>
      <td>95</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

<!-- Spanning columns and rows -->
<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <td>Normal</td>
  </tr>
  <tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

⚠️

Never use tables for page layout

In the early web (1990s–2000s), tables were used to create multi-column layouts because CSS wasn't powerful enough. Today this is considered terrible practice — screen readers announce "table with N rows and M columns" which is confusing for layout tables. Always use CSS Flexbox or Grid for layouts. Tables are for data only.

Section 3

HTML Forms — The <form> Element

Forms are how users send data to a server. The <form> element wraps all inputs. Two key attributes: action (where to send data) and method (GET or POST). Always pair every input with a <label> — it's required for accessibility.

form_structure.html

HTML

<!-- action: URL to submit to. method: GET or POST -->
<form action="/submit" method="POST">

  <!-- fieldset + legend groups related inputs -->
  <fieldset>
    <legend>Personal Information</legend>

    <!-- label for= matches input id (REQUIRED) -->
    <label for="fullname">Full Name</label>
    <input
      type="text"
      id="fullname"
      name="fullname"
      placeholder="Enter your full name"
      required
      autocomplete="name"
    >

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

    <label for="dob">Date of Birth</label>
    <input type="date" id="dob" name="dob">
  </fieldset>

  <!-- Submit button -->
  <button type="submit">Register</button>
  <button type="reset">Clear Form</button>
</form>

Section 4

All Input Types

The type attribute on <input> determines what kind of data is collected and which mobile keyboard appears. Using the correct type also enables built-in browser validation.

type="text"

Plain text — name, username

type="email"

Validates email format. Shows @ keyboard on mobile

type="password"

Masks characters while typing

type="number"

Numeric only. Supports min, max, step

type="tel"

Phone number. Shows numeric keypad on mobile

type="url"

Validates URL format (needs http://)

type="date"

Native date picker

type="time"

Time picker (HH:MM)

type="datetime-local"

Date and time combined

type="checkbox"

Multiple selections (on/off each)

type="radio"

One selection from a group

type="range"

Slider between min and max values

type="color"

Native colour picker

type="file"

File upload. Use accept to filter types

type="search"

Like text but with clear button

type="hidden"

Invisible — sends data the user doesn't see

type="submit"

Submits the form

type="reset"

Clears all form fields

all_inputs.html

HTML

<!-- Textarea: multi-line text -->
<label for="bio">About You</label>
<textarea id="bio" name="bio"
           rows="5" cols="40"
           placeholder="Tell us about yourself..."
           maxlength="500"></textarea>

<!-- Select dropdown -->
<label for="city">City</label>
<select id="city" name="city">
  <option value="">-- Select your city --</option>
  <option value="lahore">Lahore</option>
  <option value="karachi">Karachi</option>
  <option value="islamabad" selected>Islamabad</option>
</select>

<!-- Grouped select -->
<select name="course">
  <optgroup label="Programming">
    <option value="python">Python</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Design">
    <option value="ui">UI Design</option>
  </optgroup>
</select>

<!-- Checkbox group -->
<fieldset>
  <legend>Interests (select all that apply):</legend>
  <label><input type="checkbox" name="interests" value="coding"> Coding</label>
  <label><input type="checkbox" name="interests" value="design"> Design</label>
  <label><input type="checkbox" name="interests" value="data" checked> Data</label>
</fieldset>

<!-- Radio group (one choice only) -->
<fieldset>
  <legend>Experience level:</legend>
  <label><input type="radio" name="level" value="beginner" required> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

<!-- Number with constraints -->
<label for="age">Age</label>
<input type="number" id="age" name="age"
       min="5" max="120" step="1">

<!-- File upload -->
<label for="cv">Upload CV</label>
<input type="file" id="cv" name="cv"
       accept=".pdf,.doc,.docx">

✨

HTML5 form validation — free, no JavaScript needed

Add required to make a field mandatory. Add minlength="8" for minimum length. Use pattern="[A-Za-z]+" for regex validation. Use type="email" to validate email format. All of this is built into the browser — no JavaScript required for basic validation. The browser shows its own error messages automatically.

🧩 Knowledge Check

5 questions — Forms, Tables & Lists

1. What is the semantic difference between <ul> and <ol>?

2. Why must every form input have a matching <label> element?

3. What input type shows a native date picker in the browser?

4. What does colspan="3" on a table cell do?

5. How do radio buttons work — how do you ensure only one can be selected at a time?

🏗️

Challenge — Student Registration Form

Build a complete, accessible registration form with all input types

Task: Build register.html — a complete student registration form with:

1. Two <fieldset> groups: "Personal Info" and "Course Preferences"
2. Personal Info: Full Name (text, required), Email (email, required), Password (password, minlength="8"), Date of Birth (date)
3. Course Preferences: a <select> for course with at least 4 options grouped in 2 <optgroup>, radio buttons for experience level (beginner/intermediate/advanced, required), checkboxes for interests (at least 3)
4. A <textarea> for "Why do you want to join?" (rows="4", maxlength="300")
5. A submit button and reset button
6. Every input paired with a <label for="...">

💡 Show hints

All radio buttons in a group share the same name attribute
All checkboxes in a group also share the same name
select optgroup: <optgroup label="Group Name"><option>...</option></optgroup>
Password minlength: <input type="password" minlength="8" required>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Registration | BitWithBite</title>
</head>
<body>
  <h1>Student Registration</h1>

  <form action="/register" method="POST">

    <!-- Personal Information -->
    <fieldset>
      <legend>Personal Information</legend>

      <label for="name">Full Name</label>
      <input type="text" id="name" name="name"
             placeholder="Ali Hassan" required>

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

      <label for="pwd">Password</label>
      <input type="password" id="pwd" name="pwd"
             minlength="8" required>

      <label for="dob">Date of Birth</label>
      <input type="date" id="dob" name="dob">
    </fieldset>

    <!-- Course Preferences -->
    <fieldset>
      <legend>Course Preferences</legend>

      <label for="course">Choose a Course</label>
      <select id="course" name="course">
        <optgroup label="Programming">
          <option value="python">Python Mastery</option>
          <option value="htmlcss">HTML & CSS</option>
        </optgroup>
        <optgroup label="Data">
          <option value="ds">Data Science</option>
          <option value="ml">Machine Learning</option>
        </optgroup>
      </select>

      <fieldset>
        <legend>Experience Level</legend>
        <label><input type="radio" name="level" value="beginner" required> Beginner</label>
        <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
        <label><input type="radio" name="level" value="advanced"> Advanced</label>
      </fieldset>

      <fieldset>
        <legend>Interests</legend>
        <label><input type="checkbox" name="interests" value="web"> Web Dev</label>
        <label><input type="checkbox" name="interests" value="data"> Data Science</label>
        <label><input type="checkbox" name="interests" value="ai"> AI / ML</label>
      </fieldset>
    </fieldset>

    <label for="why">Why do you want to join?</label>
    <textarea id="why" name="why"
              rows="4" maxlength="300"
              placeholder="Tell us your motivation..."></textarea>

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

Phase 1 · HTMLLesson 4 of 4