Lesson 4 of 18

HTML Forms & Tables 📋

🎯 Grades 9–12 ⏱ ~35 minutes 💚 Intermediate

What You'll Learn

Build HTML forms to collect user input
Create tables for structured data
Understand common form input types

Forms

Forms collect input from users — name fields, passwords, checkboxes, buttons. Here is a basic form:

HTML

<form>
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name">

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

  <label for="grade">Grade:</label>
  <select id="grade" name="grade">
    <option value="9">9th Grade</option>
    <option value="10">10th Grade</option>
    <option value="11">11th Grade</option>
    <option value="12">12th Grade</option>
  </select>

  <button type="submit">Submit</button>
</form>

Common Input Types

HTML

<input type="text">      <!-- Single line text -->
<input type="email">     <!-- Email (validated) -->
<input type="password">  <!-- Hidden text -->
<input type="number">    <!-- Numbers only -->
<input type="checkbox">  <!-- Tick box -->
<input type="radio">     <!-- Choose one option -->
<textarea>               <!-- Multi-line text -->

Tables

HTML

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Grade</th>
      <th>Lessons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Intro to Python</td>
      <td>6&ndash;8</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Web Development</td>
      <td>9&ndash;12</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

📋">Enrollment Form

Build a mock enrollment form for OKSTEM with: name, email, grade (dropdown), course interest (radio buttons), and a submit button. Make it look clean and organized.

Name	Score
Alice	95
Bob	88

Quick Check

Which attribute links a label to its input?

Aname

Bfor

Cplaceholder

What element creates a dropdown selector?

Ainput

Bdropdown

Cselect

In an HTML table, what does th stand for?

ATable heading

BTable height

CTable horizontal