10日で覚えるHTMLDay 6: フォームの基礎
books.chapter 610日で覚えるHTML

Day 6: フォームの基礎

今日学ぶこと

  • フォームの基本構造
  • 主要なinputタイプ
  • ラベルとアクセシビリティ
  • セレクトボックスとテキストエリア

フォームとは

フォームは、ユーザーからの入力を受け取るためのHTML要素です。ログイン画面、検索ボックス、お問い合わせフォームなど、Webの至るところで使われています。

flowchart LR
    User["👤 ユーザー"] -->|"入力"| Form["📝 フォーム"]
    Form -->|"送信"| Server["🖥️ サーバー"]
    Server -->|"応答"| User
    style User fill:#3b82f6,color:#fff
    style Form fill:#22c55e,color:#fff
    style Server fill:#8b5cf6,color:#fff

<form> 要素

<form action="/submit" method="post">
    <!-- フォーム要素をここに配置 -->
</form>
属性 説明 例
action データの送信先URL "/submit"
method HTTP メソッド "get" or "post"
autocomplete 自動補完 "on" or "off"
novalidate バリデーション無効化 novalidate

GET と POST の違い

項目 GET POST
データの送信場所 URLに含まれる リクエストボディ
用途 検索、フィルタリング ログイン、登録、投稿
セキュリティ URLに表示される URLに表示されない
データ量 制限あり 大容量対応

テキスト入力

基本のテキスト入力

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

<label> の重要性

flowchart LR
    subgraph Good["✅ ラベル付き"]
        L1["&lt;label for='name'&gt;"] --> I1["&lt;input id='name'&gt;"]
    end
    style Good fill:#22c55e,color:#fff

<label>は入力欄の説明テキストです。2つの書き方があります。

<!-- 方法1: for属性とid属性で紐付け -->
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

<!-- 方法2: labelで囲む -->
<label>
    メールアドレス:
    <input type="email" name="email">
</label>

重要: <label>をクリックすると対応する入力欄にフォーカスが移ります。アクセシビリティの観点から、すべての入力欄に<label>をつけましょう。

主要な input タイプ

テキスト系

<input type="text" name="name" placeholder="お名前">
<input type="email" name="email" placeholder="mail@example.com">
<input type="password" name="password" placeholder="パスワード">
<input type="tel" name="phone" placeholder="090-1234-5678">
<input type="url" name="website" placeholder="https://example.com">
<input type="search" name="query" placeholder="検索...">
タイプ 用途 モバイルキーボード
text 一般的なテキスト 標準
email メールアドレス @付きキーボード
password パスワード 入力が隠される
tel 電話番号 数字キーパッド
url URL .comキー付き
search 検索 検索キー付き

数値系

<input type="number" name="age" min="0" max="120" step="1">
<input type="range" name="volume" min="0" max="100" value="50">

日付系

<input type="date" name="birthday">
<input type="time" name="meeting-time">
<input type="datetime-local" name="appointment">
<input type="month" name="expiry">

input の共通属性

属性 説明 例
name データ送信時のキー名 name="email"
value 初期値 value="東京"
placeholder ヒントテキスト placeholder="入力..."
required 必須入力 required
disabled 無効化 disabled
readonly 読み取り専用 readonly
autofocus 自動フォーカス autofocus
maxlength 最大文字数 maxlength="100" 
<input
    type="text"
    name="username"
    placeholder="ユーザー名を入力"
    required
    maxlength="30"
    autofocus
>

チェックボックスとラジオボタン

チェックボックス（複数選択可）

<fieldset>
    <legend>興味のある分野（複数選択可）</legend>
    <label>
        <input type="checkbox" name="interest" value="html"> HTML
    </label>
    <label>
        <input type="checkbox" name="interest" value="css"> CSS
    </label>
    <label>
        <input type="checkbox" name="interest" value="js" checked> JavaScript
    </label>
</fieldset>

ラジオボタン（1つだけ選択）

<fieldset>
    <legend>経験レベル</legend>
    <label>
        <input type="radio" name="level" value="beginner" checked> 初心者
    </label>
    <label>
        <input type="radio" name="level" value="intermediate"> 中級者
    </label>
    <label>
        <input type="radio" name="level" value="advanced"> 上級者
    </label>
</fieldset>

ポイント: ラジオボタンは同じname属性を持つグループ内で1つだけ選択できます。

要素 用途
<fieldset> 関連するフォーム要素をグループ化
<legend> グループのタイトル
checked デフォルトで選択状態にする

セレクトボックス

<label for="country">国:</label>
<select id="country" name="country">
    <option value="">選択してください</option>
    <option value="jp" selected>日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
</select>

オプショングループ

<select name="language">
    <optgroup label="アジア">
        <option value="ja">日本語</option>
        <option value="ko">韓国語</option>
        <option value="zh">中国語</option>
    </optgroup>
    <optgroup label="ヨーロッパ">
        <option value="en">英語</option>
        <option value="fr">フランス語</option>
        <option value="de">ドイツ語</option>
    </optgroup>
</select>

テキストエリア

複数行のテキスト入力には<textarea>を使います。

<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="メッセージを入力..."></textarea>
属性 説明
rows 表示行数
cols 表示列数

ボタン

<!-- 送信ボタン -->
<button type="submit">送信する</button>

<!-- リセットボタン -->
<button type="reset">リセット</button>

<!-- 汎用ボタン（JavaScript用） -->
<button type="button">クリック</button>
type 動作
submit フォームを送信
reset フォームをリセット
button 動作なし（JS連携用）

ポイント: <input type="submit">でもボタンを作れますが、<button>要素の方が中に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" method="post">
        <p>
            <label for="name">お名前 <strong>*</strong></label><br>
            <input type="text" id="name" name="name" required>
        </p>

        <p>
            <label for="email">メールアドレス <strong>*</strong></label><br>
            <input type="email" id="email" name="email" required>
        </p>

        <p>
            <label for="tel">電話番号</label><br>
            <input type="tel" id="tel" name="tel">
        </p>

        <fieldset>
            <legend>お問い合わせ種別</legend>
            <label>
                <input type="radio" name="type" value="general" checked> 一般的な質問
            </label><br>
            <label>
                <input type="radio" name="type" value="support"> サポート
            </label><br>
            <label>
                <input type="radio" name="type" value="feedback"> フィードバック
            </label>
        </fieldset>

        <p>
            <label for="message">メッセージ <strong>*</strong></label><br>
            <textarea id="message" name="message" rows="5" cols="50" required></textarea>
        </p>

        <p>
            <label>
                <input type="checkbox" name="agree" required>
                プライバシーポリシーに同意する
            </label>
        </p>

        <p>
            <button type="submit">送信する</button>
            <button type="reset">リセット</button>
        </p>
    </form>
</body>
</html>

まとめ

概念 説明
<form> フォーム全体を囲む要素
<input> 各種入力フィールド
<label> 入力欄の説明（必須）
<select> ドロップダウン選択
<textarea> 複数行テキスト入力
<fieldset> / <legend> フォーム要素のグループ化
<button> 送信・リセット・汎用ボタン

重要ポイント

  1. すべての入力欄に**<label>を必ずつける**
  2. 適切なinputタイプを選ぶ（モバイル対応に影響）
  3. **<fieldset>**で関連する入力をグループ化する
  4. name属性はデータ送信に必須

練習問題

問題1: 基本

名前、メールアドレス、パスワードの入力欄と送信ボタンを持つログインフォームを作成してください。

問題2: 応用

アンケートフォームを作成してください。ラジオボタン、チェックボックス、セレクトボックス、テキストエリアをすべて含めましょう。

チャレンジ問題

商品注文フォームを作成してください。商品選択（チェックボックス）、数量（number）、配送日（date）、配送先住所（テキスト）を含めましょう。

参考リンク

次回予告: Day 7では「フォームの応用」について学びます。バリデーション、datalist、output要素など、フォームをさらに充実させる機能を習得しましょう。