HTML: HTMLフォーム
最終更新：2026-10-13
フォーム（<form>）はウェブページがユーザーと対話する主要な方法です ― ログイン、登録、検索、お問い合わせなど、データ収集のすべてにフォームが使われます。
1. フォームの基本
<form> タグはフォーム領域を定義し、その中にさまざまな入力コントロールを含めます。ユーザーが入力してフォームを送信すると、データがサーバーに送信されます。
▶ サンプル
▶ 試してみよう2. よく使われる入力コントロール
<input> は最も多用途なコントロールです ― type 属性によってさまざまな入力形態に変わります。
▶ サンプル
▶ 試してみよう💡 フォーム属性：
action は送信先URLを指定します。method はリクエストメソッドを指定します（検索には get、ログイン/登録には post）。placeholder は入力のヒントを表示します。required はフィールドを必須にします。
3. フォームのグループ化とその他の要素
<fieldset> は関連するコントロールをグループ化し、<legend> はグループのタイトルを提供します。<datalist> は入力フィールドに事前定義された候補リストを提供します。
▶ サンプル
▶ 試してみよう<fieldset>+<legend>：フォームコントロールをグループ化し、タイトルを付ける<datalist>+<option>：入力候補を提供し、list属性と共に使用<button>の種類：submitは送信、resetはクリア、buttonは汎用ボタン
❓ よくある質問
Q
<form>タグのactionとmethod属性とは何ですか？A
actionはフォームデータを送信するサーバーのURLを指定し、methodは送信方法を指定します。methodには2種類あります：GETはデータをURLに追加します（検索クエリに適しています）、POSTはデータをリクエストボディに配置します（ログイン、登録、機密データに適しています）。サーバーで処理しない場合は、actionを省略し、JavaScriptのevent.preventDefault()で送信をインターセプトします。Q
radio（単一選択）とcheckbox（複数選択）の違いは何ですか？A
radioは単一選択で、同じグループ（name属性でグループ化）内で1つのオプションしか選択できません。checkboxは複数選択で、複数のオプションを同時に選択できます。重要なポイント：radioは互斥にするために同じname値を共有する必要があります。checkboxの名前は同じでも異なっていても構いません。どちらもcheckedでデフォルトの選択を設定します。Q
<button>のtype属性は何をするのですか？A
typeはボタンの動作を決定します：submit（デフォルト）はフォームをactionURLに送信し、resetはすべてのフォーム入力をクリアし、buttonにはデフォルトの動作がなく、JavaScriptでイベントをバインドする必要があります。注意：typeを書かないと、デフォルトはsubmitになり、フォームが意図せずに送信される可能性があります。常にtypeを明示的に指定することをお勧めします。Q HTML5のフォームバリデーションで十分ですか？JavaScriptはまだ必要ですか？
A HTML5は基本的なバリデーション（
required、minlength、patternなど）を提供し、シンプルなシナリオに対応できます。しかし、限界があります：1）エラーメッセージのスタイルをカスタマイズするのが難しい；2）複雑なバリデーション（パスワードの一致など）は不可能；3）ユーザーエクスペリエンスが不十分（タイミング、スタイルの不一致）。推奨事項：基本的な保護にはHTML5バリデーションを使用し、強化されたバリデーションとより優れたユーザーエクスペリエンスにはJavaScriptを使用します。📖 まとめ
<form>はフォームを定義。actionとmethodが送信動作を制御<input>のタイプ：text、password、email、number、radio、checkbox<select>+<option>でドロップダウン。<textarea>で複数行テキスト<fieldset>+<legend>でグループ化。<datalist>で入力候補<button>の type が動作を決定：submit / reset / button
📝 練習問題
- 登録フォーム： ユーザー名、メール、パスワード、パスワード確認、性別（ラジオ）、興味（チェックボックス）、送信ボタン、リセットボタンを含む登録ページを作成してください。
<fieldset>でグループ化してください。 - 入力候補：
<datalist>を使って「都市選択」入力フィールドを作成し、入力中に東京、大阪、名古屋、福岡が自動的に候補表示されるようにしてください。
