前回、フォームの概念や仕組みを学びましたが、今度は実際にHTMLでフォームを作ってみたいです！
いいね！前回学んだように、フォームは5つのステップで動作するけど、今日はHTMLで担当する「ユーザーが情報を入力する部分」を実際に作ってみよう。
<form>要素、入力フィールド、送信ボタンの3つが基本要素でしたよね。でも実際にどう書けばいいのか分からなくて…
そうだね、概念は分かっても実際のコードを書くのは別の話だからね。今日は一つずつ丁寧に、実際に動くフォームを作ってみよう。まず基本構造から始めて、だんだんと本格的なお問い合わせフォームまで作れるようになるよ。
フォーム要素の基本構造
HTMLフォームは、4つの基本要素を組み合わせて作られます。それぞれが明確な役割を持ち、互いに連携してユーザーとの対話を実現します。
囲む容器
説明ラベル
フィールド
ボタン
form要素 - フォームの大枠
<form>要素は、フォーム全体を包み込む「容器」の役割を果たします。この要素の中に、すべての入力フィールドやボタンを配置し、どの要素が送信対象になるかの範囲をブラウザに伝えます。
<form action="/submit" method="post">
<!-- ここに入力フィールドやボタンを配置 -->
</form><form>要素はネスト（入れ子）できません。ページ上に複数のフォームを置くことは可能ですが、フォーム内に別の<form>を入れないようにしてください。
form要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| action | データの送信先URL | action="/contact" | サーバーの処理プログラムを指定 |
| method | データの送信方法 | method="post" | post（URLに表示されない）またはget（URLに表示される） |
他にもtarget属性（送信後の表示先指定）やenctype属性（ファイル送信時のエンコード方式指定）などがありますが、基本的にはactionとmethodが最も重要です。
送信方法(method属性)の使い分け：
- post ユーザー情報、パスワードなど重要なデータに使用
- get 検索キーワードなど、URLに表示されても問題ないデータに使用
フォームでデータを安全に送るには、HTTPS（URLが「https://」で始まるサイト）を使うことが重要です。HTTPSを使うと、送信するデータが暗号化されて、他の人に見られることを防げます。
フォームの基本的な書き方を体験
フォーム要素だけを指定しても目に見えるものではありませんが、書き方だけでも確認してみましょう。
action属性とmethod属性、なんとなく分かりましたが、実際にはどう使い分けるんですか？
簡単に言うと、actionは「どこに送るか」、methodは「どうやって送るか」なんだ。例えば、お問い合わせフォームならaction="/contact"でお問い合わせ処理プログラムに、method="post"でURLに表示せず送信する、という感じだよ。詳しい使い分けは後の章で実際に動くフォームを作りながら学ぼう。
label要素 - 「分かりやすいラベル」の実装
<label>要素は、入力フィールドが何のためのものかをユーザーに説明する重要な要素です。for属性とinput要素のid属性を一致させることで、両者を関連付けます。
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username" placeholder="ユーザー名を入力">- id関連付けの説明のため、
<input>要素も併せて表示していますが、<input>要素の詳細は次のセクションで詳しく説明します。
label要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| for | 関連付けるinput要素のid | for="username" | input要素のid属性と同じ値を指定 |
label要素の重要な効果：
- アクセシビリティ向上 スクリーンリーダーで読み上げ可能
- 操作性向上 ラベルをクリックするとinput要素にフォーカス
- ユーザビリティ向上 何を入力すべきかが明確になる
label要素を体験してみよう
label要素とinput要素の関連付けを確認してみましょう。
上の例で、「お名前：」や「メールアドレス：」の文字をクリックしてみてください。自動的に関連する入力フィールドにフォーカス（カーソル）が移動します。
これは<label>要素と<input>要素が正しく関連付けられているからこそ実現する機能です。ユーザビリティが大幅に向上し、特にモバイルデバイスでは操作がしやすくなります。
input要素 - 基本的な入力フィールド
<input>要素は、ユーザーが実際にデータを入力する場所です。複数の属性を組み合わせて、目的に応じた入力フィールドを作成します。
<input type="text" id="username" name="username" placeholder="ユーザー名を入力">
<input type="email" id="email" name="email" placeholder="メールアドレスを入力">input要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| type | 入力データの種類 | type="text" | text、email、password、numberなど |
| id | ページ内での一意識別子 | id="username" | label要素との関連付けに使用 |
| name | サーバー送信時のデータ名 | name="username" | プログラムが受け取る際の識別名 |
| placeholder | 入力ヒントの表示 | placeholder="名前を入力" | 薄いグレーで表示される案内文 |
type属性の主な種類：
- text 一般的なテキスト入力（名前、住所など）
- email メールアドレス入力（@マークの有無をチェック）
- password パスワード入力（入力文字が●で隠される）
name属性とid属性について：
- name属性 フォーム送信時にサーバーが受け取るデータの名前
- id属性 label要素との関連付けやJavaScriptでの操作に使用
input要素の基本的な使い方を体験しよう
input要素のplaceholder属性を変更して、どのように表示が変わるか確認してみましょう。
placeholder属性って何ですか？入力欄にうっすら文字が表示されていますね。
placeholder属性は、入力欄に「ヒント」を表示する機能だよ。ユーザーが何を入力すべきかの参考になるんだ。ただし、これはlabel要素の代わりにはならないので注意が必要だね。
button要素 - フォームの送信
<button>要素は、フォームで何らかのアクションを実行するためのボタンです。type属性によって、異なる動作を指定できます。
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button">カスタム処理</button>button要素の主要属性
| 属性 | 説明 | 使用例 | 動作 |
|---|---|---|---|
| type=“submit” | フォーム送信ボタン | <button type="submit">送信</button> | フォームデータをサーバーに送信 |
| type=“reset” | リセットボタン | <button type="reset">リセット</button> | フォーム内の入力値をすべてクリア |
| type=“button” | 汎用ボタン | <button type="button">処理実行</button> | JavaScriptなどで独自処理を実行 |
ボタン要素以外にも、<input>要素でボタンを作成する方法もありますが、<button>要素の方が柔軟に内容をカスタマイズできるため、最近はこちらが主流です。
ボタン要素を体験してみよう
テストに値を入力して、各ボタンの動作を確認してみましょう。
resetボタンを押したら、入力した内容が消えました！
その通り！resetボタンは入力内容を初期状態に戻す機能があるんだ。間違って入力した時に便利だけど、誤操作を防ぐため、本当に必要な場合以外は使わない方がいいこともあるよ。
他の2つのボタンは何も起こりませんでした。type="submit"ボタンは送信先がないからですか？
そういうこと。送信先が設定されていないと何も起こらないんだ。
あとtype="button"のボタンはJavaScriptなどで動作を定義しないと何も起こらないよ。今回は基本的な構造を学ぶためにシンプルにしているからね。
- 誤操作に注意 リセットはフォーム内の入力をすべて消します。ユーザーが編集中の内容を失う可能性があるので、基本的には使用を控えることを推奨します。
- 本当に必要か検討 見た目だけで配置せず、本当に利便性がある場合に限定して使いましょう。
- 確認ダイアログの検討 誤クリックを防ぐために確認を入れると安全です（下記の例参照）。
- 代替案 入力内容を部分的にクリアする、下書き保存を促すなどの代替手段を検討してください。
理解度チェッククイズ
それでは、フォームの基本について理解できたかクイズで確認してみましょう！
フォーム基本要素ミニクイズ
<label ①="username">ユーザー名：</label>
<input type="text" ②="username" name="username"><!-- A -->
<input type="text" name="password">
<!-- B -->
<input type="password" name="password">
<!-- C -->
<input type="hidden" name="password">
<!-- D -->
<input type="secret" name="password"><!-- 選択肢A -->
<button type="submit">送信</button>
<!-- 選択肢B -->
<button type="send">送信</button>
<!-- 選択肢C -->
<button type="button">送信</button>
<!-- 選択肢D -->
<input type="submit" value="送信">まとめ
フォームの仕組みがよく分かりました！<form>で全体を包んで、その中に<input>や<label>を配置するんですね。
特にlabelとinputの関連付けが大切なんですね。for属性とid属性を一致させることで、ラベルをクリックしても入力欄が選択されるなんて便利！
そうだね！今日学んだHTMLの基本構造をマスターすれば、どんなフォームでも作れるようになるよ。次の章では、さらに詳しい入力タイプやバリデーションについて学んでいこう。
- form要素 フォーム全体の容器として、action（送信先）とmethod（送信方法）を指定
- label要素 分かりやすい説明文で、for属性により入力欄と関連付け
- input要素 type属性で適切な入力形式を指定（text、password、email等）
- button要素 type属性でsubmit（送信）、reset（リセット）、button（汎用）を使い分け
これらの基本要素をマスターすれば、お問い合わせフォームやログインフォームなど、様々な場面で活用できるフォームが作れるようになります。次の章では、より多様な入力タイプについて学んでいきましょう。