過去バージョン

HTML フォーム要素とは

HTML フォーム要素は、ユーザーから情報を入力してもらってサーバーに送信したり、JavaScript で処理したりするための一連の要素群です。ログイン画面、検索ボックス、会員登録フォーム、アンケートなど、Web の双方向性を支える基本機能です。

主要要素の一覧

基本的なフォームの構造

<form action="/submit" method="post">
    <fieldset>
        <legend>会員登録</legend>

        <p>
            <label for="name">氏名</label>
            <input type="text" id="name" name="name" required>
        </p>

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

        <p>
            <label for="pw">パスワード</label>
            <input type="password" id="pw" name="password"
                   minlength="8" required>
        </p>

        <p>
            <label>
                <input type="checkbox" name="agree" required>
                利用規約に同意する
            </label>
        </p>

        <button type="submit">登録する</button>
    </fieldset>
</form>

input 要素の type 属性

HTML5 で type 属性が大幅に拡張され、専用 UI とバリデーションが組み込まれた便利な入力欄が使えるようになりました。

label を関連付ける

ラベルを関連付けると、ラベルクリックで入力欄にフォーカスでき、スクリーンリーダーが正しく読み上げられます。タップ範囲も広がりモバイル UX が向上します。

<!-- パターン1: for と id で関連付け -->
<label for="user">ユーザー名</label>
<input type="text" id="user" name="user">

<!-- パターン2: 入れ子で関連付け (id 不要) -->
<label>
    ユーザー名
    <input type="text" name="user">
</label>

select — ドロップダウン

<label for="pref">都道府県</label>
<select id="pref" name="prefecture" required>
    <option value="">選択してください</option>
    <optgroup label="関東">
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
    </optgroup>
    <optgroup label="関西">
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
    </optgroup>
</select>

<!-- 複数選択 (Ctrl/Cmd キーで複数) -->
<select name="hobby" multiple size="5">
    <option>読書</option>
    <option>映画</option>
    <option>旅行</option>
</select>

textarea — 複数行入力

<label for="msg">お問い合わせ内容</label>
<textarea id="msg" name="message"
          rows="6" cols="40"
          maxlength="500"
          placeholder="500 文字以内でご記入ください"
          required></textarea>

button — ボタン

input type="submit" よりも button 要素のほうが柔軟 (中身に HTML / アイコンを入れられる) で、現代では推奨されます。

<button type="submit">送信する</button>
<button type="reset">リセット</button>
<button type="button" onclick="doSomething()">処理実行</button>

<!-- アイコン入りボタン -->
<button type="submit">
    <svg>...</svg> 検索
</button>

HTML5 バリデーション属性

form 要素の主な属性

アクセシビリティのポイント

• 入力欄には必ず label を付ける (見た目で省略する場合は aria-label)
• 関連項目は fieldset + legend でグループ化
• エラー表示は aria-invalid や aria-describedby でスクリーンリーダーへ通知
• placeholder をラベル代わりに使わない — 入力中に消えて何の欄か分からなくなる
• 必須マーク (※) にはテキストも併記するか required で識別可能に

FAQ

Q: GET と POST の違いは？
A: GET は URL にパラメータが付くので検索など冪等な取得に。POST は本文に送るので更新や機密情報に使う。パスワードや個人情報は必ず POST + HTTPS。

Q: form の中に form を入れられる？
A: 不可。form はネスト禁止。複数の独立した送信が必要なら別々の form を並列に配置する。

Q: モダンな React/Vue でも HTML フォーム要素は必要？
A: 必須。フレームワークが描画する DOM もすべて HTML 要素であり、セマンティクスとアクセシビリティの基盤となる。

関連要素

• form / input / textarea / select / button
• label / fieldset / legend
• datalist / output / progress / meter