Module 5: Lists, Tables & Forms

1. HTML Lists

Lists are used to group a set of related items. There are three main types of lists in HTML.

Unordered Lists (<ul>)

Used when the order of items does not matter. Browsers typically render unordered lists with bullet points.

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Ordered Lists (<ol>)

Used when the sequence of items is important (like a recipe or instructions). Browsers render these with numbers by default.

<ol>
  <li>Preheat oven to 350 degrees.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Description Lists (<dl>)

Used to display name-value pairs, such as terms and definitions.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

You can put lists inside of other lists to create sub-items. A nested list must be placed inside an <li> element.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black Tea</li>
      <li>Green Tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

2. HTML Tables

Tables allow you to arrange data into rows and columns (a grid). They should only be used for tabular data, not for creating page layouts.

Table Structure

• <table>: The container for the table.
• <tr>: Table Row.
• <th>: Table Header (bold and centered by default).
• <td>: Table Data (a standard cell).

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

Colspan and Rowspan

If you need a cell to stretch across multiple columns or rows, you use the colspan and rowspan attributes.

3. Forms & User Input

Forms are the primary way websites collect information from users (login forms, surveys, checkout pages).

The <form> Element

The <form> tag acts as a shell. It typically has an action attribute (where to send the data) and a method attribute (how to send the data: GET or POST).

Inputs and Labels

The <input> element is the most common form field. Its behavior changes drastically based on its type attribute. Always use a <label> tag and link it to the input using the for and id attributes.

<!-- Text Input -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<!-- Email Input (with built-in validation) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">

Textareas and Selects

• Textarea: Used for multi-line text input (like a message).
• Select: Creates a dropdown menu.

<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>

<!-- Select Dropdown -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Checkboxes and Radio Buttons

• Checkbox: Allows the user to select multiple options.
• Radio: Allows the user to select only one option from a group (grouped by sharing the same name attribute).

Form Validation & Buttons

HTML5 provides built-in validation attributes like required, minlength, max, and pattern. Finally, a form needs a button to submit the data.

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