【第2回】HTML解説 フォームとテーブルをマスターしよう【2025年最新版】
admin前回の「HTML入門ガイド」では、HTMLの基本構造やよく使うタグについて学びました。今回は、Webサイトに欠かせない**フォーム（入力欄）とテーブル（表）**の作り方を実践的に解説します。
お問い合わせフォームや会員登録、データ表示など、実務で必ず使う重要な知識が身につきます。
この記事で学べること
- フォームの基本構造と各種入力要素
- 実践的なお問い合わせフォームの作成
- テーブル（表）の作成と装飾方法
- フォームとテーブルのアクセシビリティ対応
- HTML5で追加された便利な機能
- 実務で使えるテクニックとベストプラクティス
前提知識: 第1回 HTML解説を読んでいることを推奨します。
1. HTMLフォームの基礎知識
フォームとは？
フォームは、ユーザーがWebページ上でデータを入力し、サーバーに送信するための仕組みです。以下のような場面で使われます：
- お問い合わせフォーム
- 会員登録・ログイン画面
- 検索ボックス
- アンケートや投票
- 商品購入（決済フォーム）
- ファイルアップロード
フォームの基本構造
フォームは<form>タグで囲み、その中に各種入力要素を配置します。
html
<form action="submit.php" method="post">
<!-- ここに入力要素を配置 -->
<label for="name">お名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>
<form>タグの主要属性
action属性 フォームデータを送信する先のURL（サーバー側のプログラム）を指定します。
html
<form action="/contact/send.php" method="post">
method属性 データの送信方法を指定します。主に2つの方法があります：
GET- URLにデータを付加して送信（検索フォームなど）POST- データを見えない形で送信（個人情報など）
html
<!-- 検索フォーム（GETが適切） -->
<form action="/search" method="get">
<input type="text" name="q" placeholder="検索キーワード">
<button type="submit">検索</button>
</form>
<!-- お問い合わせフォーム（POSTが適切） -->
<form action="/contact" method="post">
<input type="email" name="email" placeholder="メールアドレス">
<button type="submit">送信</button>
</form>
enctype属性 ファイルをアップロードする場合に必須です。
html
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">アップロード</button>
</form>
2. 基本的な入力要素（input要素）
<input>タグは、フォームで最も頻繁に使われる要素です。type属性の値によって、様々な種類の入力欄を作成できます。
テキスト入力（type="text"）
最も基本的な一行テキスト入力欄です。
html
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" placeholder="例: taro_yamada" required>
主要な属性
id- label要素と関連付けるための一意のIDname- サーバーに送信される際のキー名placeholder- 入力例を薄く表示required- 必須入力項目にするmaxlength- 最大文字数を制限minlength- 最小文字数を設定readonly- 読み取り専用（編集不可）disabled- 無効化（グレーアウト）
html
<input type="text"
id="postcode"
name="postcode"
placeholder="123-4567"
maxlength="8"
required>
パスワード入力（type="password"）
入力内容が「●●●」で隠されるパスワード専用の入力欄です。
html
<label for="password">パスワード:</label>
<input type="password"
id="password"
name="password"
minlength="8"
required>
メールアドレス入力（type="email"）
メールアドレス形式の検証が自動で行われます。スマートフォンでは、メール入力用のキーボードが表示されます。
html
<label for="email">メールアドレス:</label>
<input type="email"
id="email"
name="email"
placeholder="example@email.com"
required>
電話番号入力（type="tel"）
スマートフォンで電話番号用のキーボードが表示されます。
html
<label for="phone">電話番号:</label>
<input type="tel"
id="phone"
name="phone"
placeholder="090-1234-5678"
pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
pattern属性: 正規表現で入力パターンを制限できます。
数値入力（type="number"）
数値のみを入力できます。上下ボタンで値を増減できます。
html
<label for="age">年齢:</label>
<input type="number"
id="age"
name="age"
min="0"
max="120"
step="1"
value="20">
min- 最小値max- 最大値step- 増減の刻み幅value- 初期値
日付・時刻入力
HTML5で追加された便利な入力タイプです。
html
<!-- 日付 -->
<label for="birthday">生年月日:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2025-12-31">
<!-- 時刻 -->
<label for="meeting-time">予約時間:</label>
<input type="time" id="meeting-time" name="meeting-time" min="09:00" max="18:00">
<!-- 日時 -->
<label for="appointment">予約日時:</label>
<input type="datetime-local" id="appointment" name="appointment">
<!-- 月 -->
<label for="card-expiry">有効期限:</label>
<input type="month" id="card-expiry" name="card-expiry">
<!-- 週 -->
<label for="week">週:</label>
<input type="week" id="week" name="week">
URL入力（type="url"）
URL形式の検証が自動で行われます。
html
<label for="website">Webサイト:</label>
<input type="url"
id="website"
name="website"
placeholder="https://example.com">
色選択（type="color"）
カラーピッカーが表示され、色を選択できます。
html
<label for="favorite-color">好きな色:</label>
<input type="color" id="favorite-color" name="favorite-color" value="#3498db">
範囲選択（type="range"）
スライダーで数値を選択できます。
html
<label for="volume">音量:</label>
<input type="range"
id="volume"
name="volume"
min="0"
max="100"
value="50"
step="5">
<output id="volume-output">50</output>
ファイル選択（type="file"）
ファイルをアップロードできます。
html
<label for="profile-image">プロフィール画像:</label>
<input type="file"
id="profile-image"
name="profile-image"
accept="image/png, image/jpeg"
multiple>
accept- 許可するファイル形式を指定multiple- 複数ファイルの選択を許可
検索ボックス（type="search"）
検索用の入力欄です。入力中に「×」ボタンが表示されます。
html
<label for="search">サイト内検索:</label>
<input type="search"
id="search"
name="search"
placeholder="キーワードを入力">
3. 選択式の入力要素
チェックボックス（type="checkbox"）
複数の選択肢から、複数選択できます。
html
<fieldset>
<legend>興味のある分野（複数選択可）:</legend>
<input type="checkbox" id="web" name="interests" value="web">
<label for="web">Web制作</label>
<input type="checkbox" id="design" name="interests" value="design">
<label for="design">デザイン</label>
<input type="checkbox" id="programming" name="interests" value="programming" checked>
<label for="programming">プログラミング</label>
<input type="checkbox" id="marketing" name="interests" value="marketing">
<label for="marketing">マーケティング</label>
</fieldset>
checked属性: 初期状態で選択済みにします。
ラジオボタン（type="radio"）
複数の選択肢から、1つだけ選択できます。同じname属性を持つラジオボタンがグループ化されます。
html
<fieldset>
<legend>性別:</legend>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">その他</label>
<input type="radio" id="no-answer" name="gender" value="no-answer">
<label for="no-answer">回答しない</label>
</fieldset>
セレクトボックス（select要素）
ドロップダウンメニューで選択肢を表示します。
html
<label for="prefecture">都道府県:</label>
<select id="prefecture" name="prefecture" required>
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="aichi">愛知県</option>
<option value="fukuoka">福岡県</option>
</select>
選択肢のグループ化（optgroup）
html
<label for="area">地域:</label>
<select id="area" name="area">
<option value="">選択してください</option>
<optgroup label="関東">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="chiba">千葉県</option>
</optgroup>
<optgroup label="関西">
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
<option value="hyogo">兵庫県</option>
</optgroup>
</select>
複数選択可能なセレクトボックス
html
<label for="languages">使用できる言語（Ctrlキーで複数選択）:</label>
<select id="languages" name="languages" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
</select>
4. テキストエリアとボタン
複数行テキストエリア（textarea）
複数行のテキストを入力できます。
html
<label for="message">お問い合わせ内容:</label>
<textarea id="message"
name="message"
rows="5"
cols="50"
placeholder="お問い合わせ内容をご記入ください"
maxlength="1000"
required></textarea>
rows- 表示行数cols- 表示列数（文字数）maxlength- 最大文字数
ボタン要素
送信ボタン（type="submit"）
フォームを送信します。
html
<button type="submit">送信する</button>
<!-- input要素でも作成可能 -->
<input type="submit" value="送信する">
リセットボタン（type="reset"）
フォームの入力内容をすべてクリアします。
html
<button type="reset">入力内容をクリア</button>
注意: ユーザーが誤ってクリックするとデータが消えるため、使用は慎重に。
通常のボタン（type="button"）
JavaScriptで処理を実行するために使います。
html
<button type="button" onclick="checkForm()">入力内容を確認</button>
5. フォームのグループ化とラベル
fieldset と legend
関連する入力項目をグループ化します。
html
<form>
<fieldset>
<legend>基本情報</legend>
<label for="name">お名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>配送先住所</legend>
<label for="postcode">郵便番号:</label>
<input type="text" id="postcode" name="postcode">
<label for="address">住所:</label>
<input type="text" id="address" name="address">
</fieldset>
<button type="submit">送信</button>
</form>
label要素の重要性
<label>要素は、入力欄と説明文を関連付けます。これにより：
- アクセシビリティ向上 - スクリーンリーダーが正しく読み上げる
- クリック範囲拡大 - ラベルをクリックしても入力欄にフォーカス
- SEO効果 - 検索エンジンがフォームの内容を理解しやすい
labelの2つの書き方
方法1: for属性を使う（推奨）
html
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
方法2: 囲む形式
html
<label>
ユーザー名:
<input type="text" name="username">
</label>
6. 実践：お問い合わせフォームを作ろう
ここまで学んだ知識を使って、実践的なお問い合わせフォームを作成します。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="/contact/submit" method="post">
<!-- 基本情報 -->
<fieldset>
<legend>基本情報</legend>
<div>
<label for="name">お名前 <span style="color: red;">*</span></label>
<input type="text"
id="name"
name="name"
placeholder="山田 太郎"
required
autocomplete="name">
</div>
<div>
<label for="email">メールアドレス <span style="color: red;">*</span></label>
<input type="email"
id="email"
name="email"
placeholder="example@email.com"
required
autocomplete="email">
</div>
<div>
<label for="phone">電話番号（任意）</label>
<input type="tel"
id="phone"
name="phone"
placeholder="090-1234-5678"
pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}"
autocomplete="tel">
</div>
</fieldset>
<!-- お問い合わせ内容 -->
<fieldset>
<legend>お問い合わせ内容</legend>
<div>
<label for="category">お問い合わせ種別 <span style="color: red;">*</span></label>
<select id="category" name="category" required>
<option value="">選択してください</option>
<option value="product">製品について</option>
<option value="service">サービスについて</option>
<option value="support">サポートについて</option>
<option value="other">その他</option>
</select>
</div>
<div>
<label for="subject">件名 <span style="color: red;">*</span></label>
<input type="text"
id="subject"
name="subject"
placeholder="お問い合わせの件名"
required>
</div>
<div>
<label for="message">お問い合わせ内容 <span style="color: red;">*</span></label>
<textarea id="message"
name="message"
rows="8"
placeholder="お問い合わせ内容を詳しくご記入ください"
required
maxlength="2000"></textarea>
<small>2000文字以内でご記入ください</small>
</div>
</fieldset>
<!-- ファイル添付 -->
<fieldset>
<legend>ファイル添付（任意）</legend>
<div>
<label for="attachment">ファイルを選択:</label>
<input type="file"
id="attachment"
name="attachment"
accept=".jpg,.jpeg,.png,.pdf"
multiple>
<small>JPG、PNG、PDFファイル（最大5MB）</small>
</div>
</fieldset>
<!-- プライバシーポリシー同意 -->
<div>
<input type="checkbox"
id="privacy"
name="privacy"
value="agreed"
required>
<label for="privacy">
<a href="/privacy" target="_blank">プライバシーポリシー</a>に同意する
<span style="color: red;">*</span>
</label>
</div>
<!-- 送信ボタン -->
<div>
<button type="submit">送信する</button>
<button type="reset">入力内容をクリア</button>
</div>
<p><small><span style="color: red;">*</span> は必須項目です</small></p>
</form>
</body>
</html>
7. HTMLテーブル（表）の基礎
テーブルは、データを行と列で整理して表示するための要素です。
テーブルの基本構造
html
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
</table>
テーブルの主要要素
<table>- テーブル全体を囲む<tr>(table row) - 行を表す<th>(table header) - 見出しセル<td>(table data) - データセル
セマンティックなテーブル構造
html
<table>
<!-- ヘッダー部分 -->
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
</thead>
<!-- ボディ部分 -->
<tbody>
<tr>
<td>ノートPC</td>
<td>¥98,000</td>
<td>在庫あり</td>
</tr>
<tr>
<td>マウス</td>
<td>¥2,980</td>
<td>在庫あり</td>
</tr>
<tr>
<td>キーボード</td>
<td>¥12,800</td>
<td>在庫切れ</td>
</tr>
</tbody>
<!-- フッター部分 -->
<tfoot>
<tr>
<th>合計</th>
<td colspan="2">¥113,780</td>
</tr>
</tfoot>
</table>
<thead>- テーブルヘッダー<tbody>- テーブルボディ（データ部分）<tfoot>- テーブルフッター（合計行など）
セルの結合
横方向の結合（colspan）
複数の列を結合します。
html
<table border="1">
<tr>
<th colspan="3">2025年 売上実績</th>
</tr>
<tr>
<th>1月</th>
<th>2月</th>
<th>3月</th>
</tr>
<tr>
<td>¥1,000,000</td>
<td>¥1,200,000</td>
<td>¥1,500,000</td>
</tr>
</table>
縦方向の結合（rowspan）
複数の行を結合します。
html
<table border="1">
<tr>
<th rowspan="2">商品カテゴリ</th>
<th colspan="2">売上</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
</tr>
<tr>
<td>電子機器</td>
<td>¥5,000,000</td>
<td>¥6,000,000</td>
</tr>
<tr>
<td>家具</td>
<td>¥3,000,000</td>
<td>¥3,500,000</td>
</tr>
</table>
キャプションの追加
テーブルにタイトルを付けます。
html
<table>
<caption>2025年度 月別売上表</caption>
<thead>
<tr>
<th>月</th>
<th>売上</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥1,000,000</td>
</tr>
<tr>
<td>2月</td>
<td>¥1,200,000</td>
</tr>
</tbody>
</table>
8. 実践：価格表を作ろう
html
<table border="1" style="border-collapse: collapse; width: 100%;">
<caption><strong>料金プラン比較表</strong></caption>
<thead>
<tr style="background-color: #f0f0f0;">
<th>プラン</th>
<th>月額料金</th>
<th>ストレージ容量</th>
<th>ユーザー数</th>
<th>サポート</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">無料プラン</th>
<td style="text-align: center;">¥0</td>
<td style="text-align: center;">10GB</td>
<td style="text-align: center;">1名</td>
<td style="text-align: center;">メールのみ</td>
</tr>
<tr style="background-color: #fffacd;">
<th scope="row">スタンダード</th>
<td style="text-align: center;"><strong>¥1,980</strong></td>
<td style="text-align: center;">100GB</td>
<td style="text-align: center;">5名</td>
<td style="text-align: center;">メール・チャット</td>
</tr>
<tr>
<th scope="row">プレミアム</th>
<td style="text-align: center;"><strong>¥4,980</strong></td>
<td style="text-align: center;">1TB</td>
<td style="text-align: center;">無制限</td>
<td style="text-align: center;">24時間電話対応</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center; background-color: #f0f0f0;">
<small>※すべて税込価格です</small>
</td>
</tr>
</tfoot>
</table>
scope属性: スクリーンリーダーが見出しの範囲を正しく認識できるようにします。
scope="row"- 行の見出しscope="col"- 列の見出し
9. フォームの高度なテクニック
HTML5のバリデーション機能
HTML5には、JavaScriptを使わずにフォーム検証できる機能が組み込まれています。
html
<!-- 必須入力 -->
<input type="text" name="username" required>
<!-- 最小・最大文字数 -->
<input type="text" name="password" minlength="8" maxlength="20">
<!-- パターンマッチング（正規表現） -->
<input type="text" name="zipcode" pattern="\d{3}-\d{4}"
title="郵便番号を123-4567の形式で入力してください">
<!-- 数値の範囲指定 -->
<input type="number" name="age" min="18" max="100">
<!-- カスタムエラーメッセージ -->
<input type="email" name="email" required
oninvalid="this.setCustomValidity('正しいメールアドレスを入力してください')"
oninput="this.setCustomValidity('')">
autocomplete属性でユーザビリティ向上
ブラウザの自動入力機能を活用します。
html
<form>
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="address" autocomplete="street-address">
<input type="text" name="postcode" autocomplete="postal-code">
<input type="text" name="country" autocomplete="country-name">
<input type="text" name="cc-number" autocomplete="cc-number">
</form>
datalist要素でサジェスト機能
入力候補を表示します。
html
<label for="browser">お使いのブラウザ:</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
ユーザーが入力を始めると、候補がドロップダウンで表示されます。
output要素で計算結果を表示
フォームの計算結果を動的に表示します。
html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<label for="a">数値A:</label>
<input type="number" id="a" name="a" value="0">
<label for="b">数値B:</label>
<input type="number" id="b" name="b" value="0">
<output name="result" for="a b">0</output>
</form>
progress と meter 要素
進捗やメーター（計測値）を視覚的に表示します。
html
<!-- 進捗バー -->
<label for="file-upload">アップロード進捗:</label>
<progress id="file-upload" value="70" max="100">70%</progress>
<!-- メーター（ディスク使用量など） -->
<label for="disk-usage">ディスク使用量:</label>
<meter id="disk-usage"
min="0"
max="100"
low="33"
high="66"
optimum="20"
value="85">85%</meter>
10. アクセシビリティへの配慮
ARIA属性の活用
スクリーンリーダーのためのアクセシビリティを向上させます。
html
<!-- エラーメッセージの関連付け -->
<label for="email">メールアドレス:</label>
<input type="email"
id="email"
name="email"
aria-describedby="email-error"
aria-invalid="true">
<span id="email-error" role="alert" style="color: red;">
正しいメールアドレスを入力してください
</span>
<!-- 必須項目の明示 -->
<label for="username">
ユーザー名
<span aria-label="必須">*</span>
</label>
<input type="text"
id="username"
name="username"
required
aria-required="true">
<!-- グループの説明 -->
<fieldset>
<legend>配送方法</legend>
<div role="group" aria-labelledby="shipping-label">
<p id="shipping-label">配送方法を選択してください</p>
<input type="radio" id="standard" name="shipping" value="standard">
<label for="standard">通常配送（3-5営業日）</label>
<input type="radio" id="express" name="shipping" value="express">
<label for="express">速達配送（翌日）</label>
</div>
</fieldset>
キーボード操作への対応
html
<!-- tabindex で操作順序を制御 -->
<form>
<input type="text" name="field1" tabindex="1">
<input type="text" name="field3" tabindex="3">
<input type="text" name="field2" tabindex="2">
<button type="submit" tabindex="4">送信</button>
</form>
<!-- accesskey でショートカットキーを設定 -->
<button type="submit" accesskey="s">送信 (Alt+S)</button>
11. レスポンシブなフォームとテーブル
モバイル対応フォーム
html
<style>
/* スマートフォンでの表示最適化 */
@media (max-width: 768px) {
input, select, textarea {
width: 100%;
font-size: 16px; /* iOSのズームを防ぐ */
}
button {
width: 100%;
padding: 15px;
font-size: 18px;
}
}
</style>
<form>
<div style="margin-bottom: 15px;">
<label for="mobile-email">メールアドレス:</label>
<input type="email"
id="mobile-email"
name="email"
inputmode="email"
autocomplete="email">
</div>
<div style="margin-bottom: 15px;">
<label for="mobile-phone">電話番号:</label>
<input type="tel"
id="mobile-phone"
name="phone"
inputmode="tel"
autocomplete="tel">
</div>
<button type="submit">送信</button>
</form>
inputmode属性: モバイルで表示されるキーボードタイプを指定します。
text- 標準キーボードnumeric- 数字キーボードtel- 電話番号用email- メール用（@を含む）url- URL用（.comなど）
レスポンシブテーブル
スマートフォンで横スクロール可能なテーブル：
html
<div style="overflow-x: auto;">
<table style="width: 100%; min-width: 600px;">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
<th>カテゴリ</th>
<th>評価</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートPC</td>
<td>¥98,000</td>
<td>在庫あり</td>
<td>電子機器</td>
<td>★★★★☆</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</div>
12. フォームセキュリティのベストプラクティス
CSRF対策
html
<form action="/submit" method="post">
<!-- CSRFトークンを隠しフィールドで送信 -->
<input type="hidden" name="csrf_token" value="ランダムに生成されたトークン">
<input type="text" name="username">
<button type="submit">送信</button>
</form>
パスワードフィールドのセキュリティ
html
<label for="password">パスワード:</label>
<input type="password"
id="password"
name="password"
minlength="8"
required
autocomplete="new-password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="8文字以上で、大文字、小文字、数字を含める必要があります">
機密情報の送信
html
<!-- HTTPSを使用していることを確認 -->
<form action="https://secure.example.com/login" method="post">
<input type="email" name="email" autocomplete="email" required>
<input type="password" name="password" autocomplete="current-password" required>
<button type="submit">ログイン</button>
</form>
13. 実践的なテーブル例
データテーブル（ソート可能な前提）
html
<table id="data-table">
<caption>社員名簿</caption>
<thead>
<tr>
<th scope="col">
<button type="button" aria-label="社員IDでソート">社員ID</button>
</th>
<th scope="col">
<button type="button" aria-label="氏名でソート">氏名</button>
</th>
<th scope="col">
<button type="button" aria-label="部署でソート">部署</button>
</th>
<th scope="col">
<button type="button" aria-label="入社日でソート">入社日</button>
</th>
<th scope="col">メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<td>E001</td>
<td>山田 太郎</td>
<td>営業部</td>
<td>2020-04-01</td>
<td><a href="mailto:yamada@example.com">yamada@example.com</a></td>
</tr>
<tr>
<td>E002</td>
<td>佐藤 花子</td>
<td>開発部</td>
<td>2021-07-15</td>
<td><a href="mailto:sato@example.com">sato@example.com</a></td>
</tr>
<tr>
<td>E003</td>
<td>鈴木 一郎</td>
<td>総務部</td>
<td>2019-10-01</td>
<td><a href="mailto:suzuki@example.com">suzuki@example.com</a></td>
</tr>
</tbody>
</table>
スケジュール表
html
<table border="1" style="border-collapse: collapse; width: 100%;">
<caption>週間スケジュール</caption>
<thead>
<tr>
<th scope="col">時間</th>
<th scope="col">月曜日</th>
<th scope="col">火曜日</th>
<th scope="col">水曜日</th>
<th scope="col">木曜日</th>
<th scope="col">金曜日</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">9:00-10:00</th>
<td>チームミーティング</td>
<td>プロジェクト作業</td>
<td>プロジェクト作業</td>
<td>プロジェクト作業</td>
<td>週次報告会</td>
</tr>
<tr>
<th scope="row">10:00-12:00</th>
<td colspan="4" style="background-color: #e8f5e9;">開発作業</td>
<td rowspan="2" style="background-color: #fff3e0;">クライアント打ち合わせ</td>
</tr>
<tr>
<th scope="row">13:00-15:00</th>
<td colspan="2">コードレビュー</td>
<td colspan="2">テスト作業</td>
</tr>
<tr>
<th scope="row">15:00-17:00</th>
<td>ドキュメント作成</td>
<td>バグ修正</td>
<td>新機能開発</td>
<td>リファクタリング</td>
<td>振り返り</td>
</tr>
</tbody>
</table>
14. よくある質問（FAQ）
Q1. フォームとテーブルにスタイルを適用するには？
A. HTMLではなくCSSで装飾します。次回の「CSS入門ガイド」で詳しく解説します。
Q2. フォームのデータはどこに送信される？
A. <form>タグのaction属性で指定したサーバー側のプログラム（PHP、Python、Node.jsなど）に送信されます。
Q3. JavaScriptなしでフォーム検証はできる？
A. HTML5の検証属性（required、pattern、minlength等）で基本的な検証は可能です。ただし、より複雑な検証にはJavaScriptが必要です。
Q4. テーブルはレイアウトに使っても良い？
A. いいえ。テーブルはデータ表示専用です。レイアウトにはCSSのFlexboxやGridを使用してください。
Q5. モバイルでテーブルが見づらい場合は？
A. 横スクロール可能にするか、CSSでカード型レイアウトに変更するのが一般的です。
Q6. フォームの送信時にページが更新されるのを防ぐには？
A. JavaScriptでevent.preventDefault()を使用します。詳細はJavaScript講座で解説します。
15. フォーム・テーブルのベストプラクティス
フォーム設計の原則
- シンプルに保つ - 本当に必要な項目だけを聞く
- 明確なラベル - 何を入力すべきか一目でわかるように
- エラーメッセージは具体的に - 「入力エラー」ではなく「メールアドレスの形式が正しくありません」
- 進捗を表示 - 複数ページのフォームでは現在の位置を示す
- モバイルファースト - スマートフォンでの入力しやすさを最優先
テーブル設計の原則
- 見出しを明確に -
<th>で列・行の見出しを適切に設定 - データは左揃え、数値は右揃え - CSSで設定
- 行の識別を容易に - 背景色を交互に変える（ストライプ）
- 大量データは避ける - ページネーションを検討
- キャプションを付ける - テーブルの内容を簡潔に説明
16. トラブルシューティング
よくあるエラーと解決法
エラー1: フォームが送信されない
原因:
<form>タグがないaction属性が設定されていない- 送信ボタンの
type="submit"がない
解決法:
html
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">送信</button> <!-- type属性を明示 -->
</form>
エラー2: テーブルのレイアウトが崩れる
原因:
<tr>や<td>の閉じタグ忘れ- colspanやrowspanの計算ミス
解決法:
- HTMLバリデーターでチェック
- 各行の列数が一致しているか確認
エラー3: ラベルをクリックしても入力欄にフォーカスしない
原因:
<label>のfor属性と<input>のidが一致していない
解決法:
html
<!-- 正しい例 -->
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
エラー4: モバイルで入力欄が小さい
原因:
font-sizeが16px未満- viewportの設定がない
解決法:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input, select, textarea {
font-size: 16px; /* 最低16px */
}
</style>
17. 実践課題：あなたもやってみよう
課題1: 会員登録フォーム（初級）
以下の項目を含む会員登録フォームを作成してください：
- ユーザー名（必須、4-20文字）
- メールアドレス（必須）
- パスワード（必須、8文字以上）
- パスワード確認（必須）
- 生年月日（必須）
- 性別（選択式）
- 利用規約への同意（チェックボックス、必須）
課題2: 商品一覧テーブル（中級）
以下の要素を含む商品一覧テーブルを作成してください：
- 商品ID、商品名、価格、カテゴリ、在庫状況の列
- thead、tbody、tfootを使った構造化
- 合計金額を表示するフッター
- 価格が高い商品の行を強調表示
課題3: 予約フォーム（上級）
レストラン予約フォームを作成してください：
- 予約日（date）
- 予約時間（time、営業時間内のみ）
- 人数（number、1-10名）
- コース選択（select）
- アレルギー・要望（textarea）
- 連絡先情報（名前、電話、メール）
- 適切なグループ化（fieldset）
18. 次のステップ
学習ロードマップ
今回学んだこと ✓
- フォームの基本構造
- 各種入力要素の使い方
- テーブルの作成方法
- アクセシビリティへの配慮
次に学ぶべきこと
- CSSでフォームとテーブルをデザイン
- JavaScriptでフォーム検証を実装
- サーバーサイドでのフォーム処理
- データベースとの連携
推奨学習リソース
公式ドキュメント
- MDN Web Docs - HTML Forms - フォームの詳細ガイド
- WHATWG HTML Standard - HTML仕様書
- W3C WAI-ARIA - アクセシビリティ標準
オンラインツール
- HTML Form Generator - フォームを視覚的に作成
- Tables Generator - テーブルコードを自動生成
- Can I Use - ブラウザ対応状況を確認
実践練習サイト
- CodePen - フォームのデモを試す
- JSFiddle - インタラクティブなフォームを作成
19. HTML5の最新フォーム機能
新しい入力タイプの活用
html
<!-- 複数メールアドレス -->
<input type="email" multiple name="recipients">
<!-- URLの検証 -->
<input type="url" name="website" placeholder="https://example.com">
<!-- 週の選択 -->
<input type="week" name="week">
<!-- 月の選択 -->
<input type="month" name="month">
<!-- 時刻の範囲 -->
<input type="time" name="start-time" min="09:00" max="18:00">
フォームの自動保存（ブラウザ機能）
html
<form>
<!-- ブラウザが入力内容を記憶 -->
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<!-- 自動保存を無効化したい場合 -->
<input type="password" name="password" autocomplete="off">
</form>
リアルタイムバリデーション
html
<form>
<label for="username">ユーザー名:</label>
<input type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9_]{4,20}"
title="4-20文字の英数字とアンダースコアのみ使用可能"
oninput="this.setCustomValidity('')"
oninvalid="this.setCustomValidity('ユーザー名は4-20文字の英数字で入力してください')">
<span id="username-feedback"></span>
</form>
まとめ：フォームとテーブルをマスターしよう
フォームとテーブルは、Webサイトで最も頻繁に使用される重要な要素です。この記事で学んだ内容をしっかり理解し、実践することで、ユーザーフレンドリーで機能的なWebページを作成できるようになります。
重要ポイントの振り返り
フォーム
- 適切な入力タイプを選ぶ - type属性で最適な入力方法を提供
- ラベルは必須 - アクセシビリティとユーザビリティのために
- バリデーションを活用 - HTML5の検証機能で基本的なエラーを防止
- モバイルを考慮 - inputmode属性とfont-size:16px以上
テーブル
- セマンティックな構造 - thead、tbody、tfootを適切に使用
- 見出しの明確化 - thタグとscope属性でアクセシビリティ向上
- レスポンシブ対応 - スマートフォンでの表示方法を工夫
- データ表示専用 - レイアウト目的では使用しない
次回予告
第3回: CSS入門ガイド - フォームとテーブルを美しくデザインしよう
次回は、CSSを使ってフォームとテーブルを視覚的に魅力的にデザインする方法を学びます。以下の内容を予定しています：
- フォームのスタイリング基礎
- ボタンのデザインバリエーション
- テーブルの装飾テクニック
- レスポンシブデザインの実装
- アニメーション効果の追加
最も重要なこと: この記事を読むだけでなく、実際に手を動かしてフォームとテーブルを作成してみてください。エラーを経験し、解決することで、確実にスキルが身につきます。
さあ、実践を始めましょう！
＼ 最新情報をチェック ／
