この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: フォーム要素
SEOタイトル: HTML フォーム関連要素 完全ガイド（form / input / textarea / select / button / label / fieldset の使い分け）

この記事の要点
  • 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) を指定
input1 行入力。type 属性で種類を切り替え (text / email / checkbox / radio など)
textarea複数行のテキスト入力
select / optionドロップダウン / リストボックス
button送信 / リセット / 汎用ボタン
label入力欄のラベル。for 属性または入れ子で関連付け
fieldset / legend関連項目をグループ化、見出しを付ける
datalistinput の入力候補を提供
output計算結果の表示
progress / meter進捗 / 割合の表示

基本的なフォームの構造


    

        会員登録

input 要素の type 属性

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

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

label を関連付ける

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

select — ドロップダウン

textarea — 複数行入力

button — ボタン

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

HTML5 バリデーション属性

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

form 要素の主な属性

属性意味
action送信先 URL
methodget / post
enctype送信形式。ファイル送信時は multipart/form-data
target送信後の表示先 (_blank 等)
novalidateHTML5 バリデーションを無効化
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