Tech Learning

HTML Learning Part Two - Lists, Tables, and Forms

📢 This article was translated by gemini-2.5-flash

Introduction

HTML Learning Part One - Basics: https://blog.yexca.net/archives/146
HTML Learning Part Two - Lists, Tables, and Forms: https://blog.yexca.net/archives/150
HTML Learning Part Three - Web Layout: https://blog.yexca.net/archives/195

Lists

Lists are categorized into unordered, ordered, and definition lists.

Unordered Lists

unordered list -> list

1
2
3
4
5

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

Output looks like this:

  • 第一项
  • 第二项
  • 第三项

Ordered Lists

ordered list -> list

1
2
3
4
5

<ol>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ol>

Output looks like this:

  1. 第一项
  2. 第二项
  3. 第三项

Definition Lists

My mnemonic: define list -> define title -> define description

1
2
3
4
5
6
7
8

<dl>
    <dt>First Title</dt>
    <dd>1.1 Description</dd>
    <dd>1.2 Description</dd>
    <dt>Second Title</dt>
    <dd>2.1 Description</dd>
    <dd>2.2 Description</dd>
</dl>

Output looks like this:

第一标题
1.1 描述
1.2 描述
第二标题
2.1 描述
2.2 描述

A dl tag can only contain dt and dd tags. However, dt and dd tags can contain any content.

Tables

TagDescriptionMy Mnemonic
tableDefines a table
trTable rowtable row
thTable header celltable head
tdContent celltable data

The following structural tags can be omitted, mainly for browser rendering.

TagDescription
theadDefines header content
tbodyDefines table body
tfootDefines table footer, summary info

Table Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table>
    <thead>
        <tr>
            <th>\</th>
            <th>x</th>
            <th>y</th>
            <th>total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td>
            <td>50</td>
            <td>50</td>
            <td>100</td>
        </tr>
        <tr>
            <td>b</td>
            <td>50</td>
            <td>50</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>total</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </tfoot>
</table>

Output looks like this:

\xytotal
a5050100
b5050100
total100100100

Cell Merging

Table cells can be merged across rows or columns. After merging, the merged cells should be removed.

AttributeDescription
rowspanRow span, value is the number of rows to span
colspanColumn span, value is the number of columns to span

For example, merge the second column of the second and third rows, and merge the last three columns of the last row in the table above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<table>
    <thead>
        <tr>
            <th>\</th>
            <th>x</th>
            <th>y</th>
            <th>total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td>
            <!-- Add rowspan attribute here -->
            <td rowspan="2">50</td>
            <td>50</td>
            <td>100</td>
        </tr>
        <tr>
            <td>b</td>
            <!-- This content can be removed (commented out here) -->
            <!--<td>50</td>-->
            <td>50</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>total</td>
            <!-- Add colspan attribute here -->
            <td colspan="3">100</td>
            <!-- This content can be removed (commented out here) -->
            <!--<td>100</td>
            <td>100</td>-->
        </tr>
    </tfoot>
</table>

Output looks like this:

\xytotal
a5050100
b50100
total100

If structural tags (thead, tbody, tfoot) are used, you can’t merge across structures. For instance, the third row in the example above cannot merge with the last row.

Forms

form tag

A form needs a form tag to define its area. The tags mentioned below must be placed inside the form tag.

input tag

Most form elements are implemented using the input tag. Different type attribute values result in different functionalities.

type attribute valueDescription
textText field
passwordPassword field
radioRadio button
checkboxCheckbox
fileFile upload

Placeholder Text

Placeholder text acts as a hint. It can be used for text and password fields.

1

<input type="text" placeholder="Hint message" />

Output looks like this:

Radio Button

AttributeFunction
nameControl name
checkedDefault selected

The following code implements gender selection:

1
2
3

Gender:
<input type="radio" name="gender" checked />Male
<input type="radio" name="gender" />Female

Output looks like this:

性别： 男 女

File Upload

By default, the file type only allows uploading one file. To upload multiple files, add the multiple attribute.

1

<input type="file" multiple />

Checkbox

Also known as a checkbox. Use the checked attribute for default selection.

1
2
3
4

<input type="checkbox" checked /> a
<input type="checkbox" /> b
<input type="checkbox" /> c
<input type="checkbox" /> d

1
2
3
4
5
6
7

<select>
    <option>CN</option>
    <option>USA</option>
    <option>UK</option>
    <!-- Specifies default selection -->
    <option selected>JP</option>
</select>

Text Area

A form control for multi-line text input, typically used for a bio or personal description.

1

<textarea>Hint message</textarea>

label tag

Used for descriptive text associated with a specific tag on a webpage. It can also link text with a form control, expanding the clickable area of the control.

For instance, with the gender radio buttons above, only clicking the circle selects the radio button. Using this tag allows clicking the text to select the radio button as well.

Method One

Add an id attribute to the input tag and a for attribute to the label tag; both attribute values should match.

1
2
3
4

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

Method Two

Directly wrap the text and form control with the label tag.

1
2

<label><input type="radio" name="gender" />Male</label>
<label><input type="radio" name="gender" />Female</label>

Controls that support expanding their clickable area with the label tag include: text fields, password fields, file uploads, radio buttons, checkboxes, dropdown menus, text areas, etc.

Buttons

The button tag’s functionality varies based on its type attribute value.

type attribute valueDescription
submitDefault function: submits data to the backend
resetReset button: restores form controls to their default values
buttonGeneric button: requires JavaScript for functionality
1

<button type="">Button</button>