HTML学習その2 - リスト、テーブル、フォーム

📢 この記事は gemini-2.5-flash によって翻訳されました

はじめに

HTML学習その1 - 基本: https://blog.yexca.net/archives/146
HTML学習その2 - リスト、テーブル、フォーム: https://blog.yexca.net/archives/150
HTML学習その3 - ウェブページのレイアウト: https://blog.yexca.net/archives/195

テーブル

タグ	説明	僕の覚え方
table	テーブルを定義する
tr	テーブルの行	table row
th	ヘッダーセル	table head
td	データセル	table data

以下の構造タグは省略できるけど、主にブラウザ向けだね。

タグ	説明
thead	ヘッダー部分を定義する
tbody	テーブル本体を定義する
tfoot	テーブルのフッター部分を定義する（集計情報など）

テーブルの例

 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>

表示はこんな感じ

\	x	y	total
a	50	50	100
b	50	50	100
total	100	100	100

セルの結合

テーブルの結合は、行をまたぐ結合と列をまたぐ結合があるよ。結合したら、結合された方のセルは削除しないといけないんだ。

属性	説明
rowspan	行をまたぐ結合、値は結合する行数
colspan	列をまたぐ結合、値は結合する列数

例えば、上のテーブルの2行目2列目と3行目2列目を結合して、最後の行の最後の3列を結合するよ。

 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>
            <!-- ここに`rowspan`属性を追加 -->
            <td rowspan="2">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>
            <!-- ここに`colspan`属性を追加 -->
            <td colspan="3">100</td>
            <!-- この内容は削除できる（ここをコメントアウト） -->
            <!--<td>100</td>
            <td>100</td>-->
        </tr>
    </tfoot>
</table>

表示はこんな感じ

\	x	y	total
a	50	50	100
b	50	50	100
total	100

もし構造タグ（thead, tbody, tfoot）を使ってるなら、構造をまたいで結合はできないよ。例えば、上のテーブルの3行目と最後の行は結合できないってことね。

フォーム

formタグ

フォームを作るには、formタグを使ってフォームの範囲を決める必要があるよ。これから説明するタグは、全部formタグの中に入れるんだ。

inputタグ

ほとんどのフォームはinputタグで作るんだ。type属性の値によって、いろんな機能が実現できるよ。

type属性値	説明
text	テキストボックス
password	パスワードボックス
radio	ラジオボタン
checkbox	チェックボックス
file	ファイルアップロード

プレースホルダーテキスト

プレースホルダーテキストっていうのは、入力例とかヒントのことだね。テキストボックスとパスワードボックスで使えるよ。

1
<input type="text" placeholder="ヒント情報" />

表示はこんな感じ

ラジオボタン (radio)

属性	役割
name	コントロール名
checked	デフォルトで選択

以下のコードは性別の選択を実装するよ。

1
2
3
性別：
<input type="radio" name="gender" checked />男
<input type="radio" name="gender" />女

表示はこんな感じ

性別：男女

ファイルアップロード

デフォルトだと、fileタイプのinputタグはファイルを1つしかアップロードできないんだ。複数アップロードしたい場合は、multiple属性を追加すればいいよ。

1
<input type="file" multiple />

チェックボックス (checkbox)

別名チェックボックスだね。デフォルトで選択状態にしたい場合はchecked属性を使えるよ。

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>
    <!-- selectedでデフォルト選択を指定 -->
    <option selected>JP</option>
</select>

テキストエリア

複数行のテキストを入力するためのフォームコントロールだよ。自己紹介とかでよく使うね。

1
<textarea>ヒント情報</textarea>

labelタグ

ウェブページのあるタグに対する説明テキストとして使うんだ。あと、テキストとフォームコントロールを紐付けて、クリックできる範囲を広げることもできるよ。

例えば、さっきの性別のラジオボタンだと、丸い部分をクリックしないと選択できなかったよね。でも、このタグを使えば、文字を選んでもラジオボタンが選択できるようになるんだ。

方法1

inputタグにid属性を追加して、labelタグにfor属性を追加するよ。この2つの属性値は同じにするんだ。

1
2
3
4
<input type="radio" name="gender" id="male"/>
    <label for="male">男</label>
<input type="radio" name="gender" id="female"/>
    <label for="female">女</label>

方法2

labelタグで文字とフォームコントロールを直接囲む方法。

1
2
<label><input type="radio" name="gender" />男</label>
<label><input type="radio" name="gender" />女</label>

labelタグでクリック範囲を広げられるコントロールは、テキストボックス、パスワードボックス、ファイルアップロード、ラジオボタン、チェックボックス、プルダウンメニュー、テキストエリアなんかがあるよ。

ボタン

buttonタグは、type属性の値によって機能が変わるんだ。

type属性値	説明
submit	デフォルトの機能で、データをバックエンドに送信する
reset	リセットボタンで、フォームコントロールを初期値に戻す
button	普通のボタンで、JavaScriptと組み合わせて使う必要がある

1
<button type="">ボタン</button>