HTML Lists, Tables and Forms

🎯Learning Objectives

Level 08 introduced text, links and media. This lesson organizes information and collects user input. You will choose the right list, build a readable data table, associate labels with controls, and explain which values a form submits.

🧩Choose the Structure Before the Tags

Imagine a CodeBhavya workshop page. Its prerequisites are a list, its timetable is a table, and its registration area is a form. Choosing by appearance alone can create confusing markup.

📋Unordered Lists — Related Items

Use <ul> when rearranging the items does not change their meaning. Each item belongs inside an <li>. Browser bullets are a default presentation; CSS can change their appearance.

<ul>
  <li>HTML document structure</li>
  <li>Links and images</li>
  <li>A code editor</li>
</ul>

Expected result: three related prerequisite items. A bullet is not manually typed into each item.

🔢Ordered Lists — Meaningful Sequence

Use <ol> for steps, rankings or another sequence where position matters. start changes the initial number; reversed reverses numbering; an item’s value sets its number and affects subsequent numbering.

<ol start="3">
  <li>Validate the HTML.</li>
  <li>Test keyboard navigation.</li>
  <li>Publish the page.</li>
</ol>

Expected labels: 3, 4, 5. Numbering alone does not make unrelated content a meaningful sequence.

🌳Nested Lists and Description Lists

A nested list belongs inside the parent item, before that item’s closing tag. A description list associates terms or names with descriptions; it does not use li.

<ul>
  <li>Frontend
    <ul><li>HTML</li><li>CSS</li></ul>
  </li>
  <li>Backend</li>
</ul>

<dl>
  <dt>GET</dt><dd>A method used to retrieve a representation.</dd>
  <dt>POST</dt><dd>A method commonly used to submit data for processing.</dd>
</dl>

A term can have multiple descriptions, and multiple terms can share a description. Use the grouping that matches your information rather than forcing every definition into a two-column table.

📊Table Anatomy — Rows, Headers and Cells

table contains a data table, tr creates a row, th identifies a header cell and td contains a data cell. A caption gives the table a meaningful title. thead, tbody and tfoot group rows; they do not create columns.

<table>
  <caption>CodeBhavya workshop seats</caption>
  <thead>
    <tr><th scope="col">Workshop</th><th scope="col">Seats</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">HTML Foundations</th><td>20</td></tr>
    <tr><th scope="row">Forms Practice</th><td>15</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>35</td></tr>
  </tfoot>
</table>

Read the result: the total is 35 seats. The HTML structure communicates the data; borders and spacing in this rendered example come from CSS.

🔎Header Relationships and Accessible Tables

For a simple table, scope="col" marks a column header and scope="row" marks a row header. This helps tools associate a value with its context. A visually bold td is still a data cell.

For complex tables with multiple header levels, explicit header IDs and a cell’s headers attribute may be needed. Prefer splitting a complicated table into simpler tables when that makes the information easier to understand.

Keep tables readable on phones with a horizontal scrolling wrapper. Do not remove their semantic structure merely to fit the viewport.

🧱colspan and rowspan — Plan the Grid

colspan extends a cell across columns; rowspan extends it across rows. Cells covered by a span must not also be added as ordinary cells.

<table>
  <caption>Workshop session plan</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Session</th></tr></thead>
  <tbody>
    <tr><th scope="row" rowspan="2">Monday</th><td>Lists</td></tr>
    <tr><td>Tables</td></tr>
    <tr><td colspan="2">Independent practice</td></tr>
  </tbody>
</table>

Trace the grid: Monday occupies the first column in two rows. The second row therefore contains only the Tables cell. The final practice cell occupies both columns. Complex spanning also requires careful header associations.

📝Forms — Controls, action and method

A form groups controls for submission. action identifies the destination, and method specifies how the browser submits the data. HTML creates the interface; a real destination needs server logic to process and validate it.

<!-- /workshop-register is an illustrative server endpoint. -->
<form action="/workshop-register" method="post">
  <label for="student-name">Student name</label>
  <input id="student-name" name="student" type="text" required>
  <button type="submit">Register</button>
</form>

The endpoint above is an example, not a working CodeBhavya registration service. The interactive lab later in this lesson prevents network submission and shows the payload locally.

🏷️Labels, id, name and value

id identifies an element in the document; a label’s for matches that ID. name is the submitted field key. value supplies the field value, or its initial value for controls such as a text input.

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

Entering learner@example.com yields the pair email=learner@example.com. An ID does not replace a name. Placeholder text is a hint, not a persistent label. IDs should be unique in the document.

🔤Input Types and Native Validation

Choose a type that matches the data. Types improve browser interaction and, for some controls, provide constraints. Browser presentation varies by device.

<label for="seat-count">Seats requested (1–4)</label>
<input id="seat-count" name="seats" type="number"
       min="1" max="4" step="1" value="1" required>

Try 0, 1, 4, 5 and 1.5. The allowed values are whole numbers from 1 through 4. Client-side validation can be bypassed; the server must validate independently.

☑️Radio Buttons, Checkboxes and Groups

Radio buttons with the same name in the same form form a mutually exclusive group. Checkboxes represent independent choices. A checked checkbox submits its value; an unchecked one contributes no pair.

<fieldset>
  <legend>Attendance mode</legend>
  <label><input type="radio" name="mode" value="online" checked> Online</label>
  <label><input type="radio" name="mode" value="campus"> Campus</label>
</fieldset>
<label><input type="checkbox" name="updates" value="yes"> Send workshop updates</label>

Selecting Campus and leaving updates unchecked yields mode=campus, with no updates pair. Give choice controls explicit values so their meaning is clear.

📂select, textarea, fieldset and Buttons

A select presents options, and the selected option’s value is submitted. A textarea accepts multiple lines; its initial content goes between its tags. A fieldset groups related controls and its legend names that group.

<label for="topic">Workshop topic</label>
<select id="topic" name="topic" required>
  <option value="">Choose a topic</option>
  <option value="html">HTML Foundations</option>
  <option value="forms">Forms Practice</option>
</select>
<label for="notes">Learning goal</label>
<textarea id="notes" name="notes" rows="3">Practise accessible forms.</textarea>
<button type="submit">Submit</button>
<button type="reset">Restore defaults</button>
<button type="button">Show help</button>

Inside a form, a button without an explicit type commonly acts as a submit button. Use type="button" for helper actions. Reset restores initial defaults, which may not be empty values; it does not erase data already stored by a server.

🖱️Which Values Are Submitted?

For the basic controls in this lesson, a submitted pair generally needs a name and an enabled control. Unchecked checkboxes and radios are omitted. A selected option contributes its value. Repeated names can produce multiple pairs.

<input name="course" value="HTML" readonly>
<input name="internalNote" value="Draft" disabled>
<input value="Unnamed field">
<input type="checkbox" name="updates" value="yes">

Expected pairs: only course=HTML, assuming the checkbox remains unchecked. The lab uses an unnamed submit button, so its button adds no field.

📨GET, POST and Encoding

A GET form typically puts encoded data in the URL query. It suits retrieval such as searching. A POST form typically sends data in the request body and is commonly used for actions that change server state. POST by itself is not encryption; HTTPS protects transport for both methods.

The usual form encoding is application/x-www-form-urlencoded. Spaces become + and special characters are escaped. Repeated fields remain separate pairs. File uploads normally use POST with enctype="multipart/form-data".

<!-- Illustrative search endpoint; not a live CodeBhavya route. -->
<form action="/search" method="get">
  <label for="query">Search lessons</label>
  <input id="query" name="q" value="HTML forms">
  <button type="submit">Search</button>
</form>
<!-- Expected request target: /search?q=HTML+forms -->

Do not place passwords in GET queries. A POST body still needs careful handling, server validation, authorization and appropriate protection against unwanted requests.

🔄Premium Visualizer — Form Submission Journey

Follow the sequence from input to processing. This is a conceptual journey; the lab stops before a real network request.

student = Asha; topic = html; seats = 1

🧪Premium Interactive — Workshop Form Lab

Inspect real browser-generated form pairs. Nothing is submitted to a server or saved by this lab. Use fictional data. Change the method to compare the same data as a URL query and a request body.

Press Inspect submission to see which fields contribute.

<form id="wt9Form" action="/workshop-register" method="post">
<label for="wt9Student">Learner name (use a fictional name)</label><input id="wt9Student" name="student" value="Asha" required maxlength="60">
<label for="wt9Email">Practice email</label><input id="wt9Email" name="email" type="email" value="asha@example.com" required>
<label for="wt9Topic">Topic</label><select id="wt9Topic" name="topic" required><option value="">Choose a topic</option><option value="html" selected>HTML Foundations</option><option value="forms">Forms Practice</option></select>
<label for="wt9Seats">Seats (1–4)</label><input id="wt9Seats" name="seats" type="number" min="1" max="4" step="1" value="1" required>
<fieldset><legend>Attendance mode</legend><label class="wt9-choice"><input type="radio" name="mode" value="online" checked>Online</label><label class="wt9-choice"><input type="radio" name="mode" value="campus">Campus</label></fieldset>
<label class="wt9-choice"><input type="checkbox" name="updates" value="yes">Include workshop updates</label>
<label for="wt9Course">Course (read-only)</label><input id="wt9Course" name="course" value="Web Technologies" readonly>
<label for="wt9Draft">Internal note (disabled)</label><input id="wt9Draft" name="internalNote" value="Draft" disabled>
<label for="wt9Notes">Learning goal</label><textarea id="wt9Notes" name="notes" rows="3">Practise forms.</textarea>
<div class="wt9-actions"><button class="primary-button" type="submit">Inspect submission</button><button class="secondary-button" type="reset">Restore defaults</button></div>
</form>

The endpoint shown is illustrative. The lab prevents submission even if its script fails to initialize. Copied HTML needs an actual server endpoint and server-side validation before it becomes a real registration form.

🛡️Common Mistakes and How to Diagnose Them

❓Quick MCQs

Choose an answer to see why it is correct. Use Reset quiz to practise again.

💻Extra Practice

📌Quick Revision

📖Glossary

🏆Final Challenge — Workshop Resource Page

Build a complete HTML document with a prerequisites list, an ordered preparation plan, a captioned timetable and a labelled registration form. Include a topic selector, radio group, optional updates checkbox and seat count from 1 to 4.

• Use unique IDs, explicit names and button types.
• Make the table readable and identify its headers.
• Explain the expected payload when updates is unchecked.
• Document that the action is illustrative until a server is implemented.
• Test keyboard access, invalid input and reset defaults.

Success criterion: explain every submitted field and every omitted field without guessing from its appearance.