この記事の要点

HTML フォーム要素はユーザーから入力を受け取るための一連の要素群 コンテナ: form — 入力: input / textarea / select — 操作: button 構造化: label / fieldset / legend / datalist / output label を必ず関連付ける — アクセシビリティとモバイルでのタップ範囲拡大に必須 HTML5 で input type が大幅拡張: email / tel / url / date / color など

HTML フォーム要素とは

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

主要要素の一覧

要素	役割
form	フォーム全体のコンテナ。送信先 (action) と送信方法 (method) を指定
input	1 行入力。type 属性で種類を切り替え (text / email / checkbox / radio など)
textarea	複数行のテキスト入力
select / option	ドロップダウン / リストボックス
button	送信 / リセット / 汎用ボタン
label	入力欄のラベル。for 属性または入れ子で関連付け
fieldset / legend	関連項目をグループ化、見出しを付ける
datalist	input の入力候補を提供
output	計算結果の表示
progress / meter	進捗 / 割合の表示

基本的なフォームの構造

<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 とバリデーションが組み込まれた便利な入力欄が使えるようになりました。

type	用途	UI / 検証
text	1 行テキスト (デフォルト)	-
email	メールアドレス	形式チェック、モバイルで @ キー
tel	電話番号	モバイルで数字キーパッド
url	URL	形式チェック
number	数値	スピンボタン、min/max/step
password	パスワード (マスク)	文字を ●
date / time / datetime-local	日時	カレンダー / 時計 UI
color	色	カラーピッカー
range	範囲スライダー	つまみで値選択
file	ファイル選択	ファイル選択ダイアログ
checkbox	チェックボックス	複数選択可
radio	ラジオボタン	同 name で 1 つのみ選択
hidden	非表示の値	CSRF トークン等
submit / reset	送信 / リセット	ボタンとして表示

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 バリデーション属性

属性	意味
required	必須項目
minlength / maxlength	文字数の最小 / 最大
min / max	数値 / 日付の最小 / 最大
step	数値の刻み幅
pattern	正規表現で形式チェック
placeholder	入力例のヒント表示
autocomplete	自動入力候補の制御
readonly / disabled	読み取り専用 / 無効化

form 要素の主な属性

属性	意味
action	送信先 URL
method	get / post
enctype	送信形式。ファイル送信時は multipart/form-data
target	送信後の表示先 (_blank 等)
novalidate	HTML5 バリデーションを無効化
autocomplete	フォーム全体の自動入力 on/off

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

• 入力欄には必ず 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