HTMLフォーム
フォーム（<form>）はウェブページがユーザーと対話する主要な方法です ― ログイン、登録、検索、お問い合わせなど、データ収集のすべてにフォームが使われます。
フォームの基本
<form> タグはフォーム領域を定義し、その中にさまざまな入力コントロールを含めます。ユーザーが入力してフォームを送信すると、データがサーバーに送信されます。
サンプル
HTML
<form action="/submit" method="post">
<label>ユーザー名：<input type="text" name="username"></label>
<label>パスワード：<input type="password" name="password"></label>
<button type="submit">ログイン</button>
</form>
よく使われる入力コントロール
<input> は最も多用途なコントロールです ― type 属性によってさまざまな入力形態に変わります。
サンプル
HTML
<!-- テキスト入力 -->
<input type="text" placeholder="名前を入力してください">
<!-- メールアドレス -->
<input type="email" placeholder="you@example.com">
<!-- 数値 -->
<input type="number" min="1" max="100">
<!-- ラジオボタン -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<!-- チェックボックス -->
<input type="checkbox" name="hobby" value="coding"> プログラミング
<!-- ドロップダウン -->
<select>
<option>都市を選択してください</option>
<option>東京</option>
<option>大阪</option>
</select>
<!-- テキストエリア -->
<textarea rows="4" placeholder="メッセージを入力してください..."></textarea>
💡 フォーム属性：
action は送信先URLを指定します。method はリクエストメソッドを指定します（検索には get、ログイン/登録には post）。placeholder は入力のヒントを表示します。required はフィールドを必須にします。
フォームのグループ化とその他の要素
<fieldset> は関連するコントロールをグループ化し、<legend> はグループのタイトルを提供します。<datalist> は入力フィールドに事前定義された候補リストを提供します。
サンプル
HTML
<form>
<fieldset>
<legend>個人情報</legend>
<label>名前：<input type="text" name="name" list="names"></label>
<label>性別：
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
</label>
</fieldset>
<datalist id="names">
<option value="田中">
<option value="佐藤">
<option value="鈴木">
</datalist>
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button" onclick="alert('クリックされました！')">通常ボタン</button>
</form>
<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>を使って「都市選択」入力フィールドを作成し、入力中に東京、大阪、名古屋、福岡が自動的に候補表示されるようにしてください。