HTML フォーム

Volardev 編集部 April 12, 2026

Webサイトが単なる「読み物」から「インタラクティブなツール」へと進化するために欠かせないのが HTML フォーム です。お問い合わせ、ログイン、検索など、ユーザーからの入力を受け取ってサーバーに送信する仕組みのすべてがここに集約されています。

フォームの実装は覚えるべき「部品」が多いですが、基本さえ押さえればパズルのように組み立てることができます。

1. `<form>` 要素

<form> 要素は、ユーザー入力を収集するためのさまざまな入力要素（テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど）をまとめるコンテナです。

<form>
</form>

2. `<input>` 要素

フォームの中で最も頻繁に使われるのが <input> 要素です。type 属性を変えるだけで、驚くほど多様な入力形式に変化します。

よく使われる入力タイプ

タイプ	コード例	説明
テキスト	`<input type="text">`	1行のテキスト入力。
ラジオボタン	`<input type="radio">`	複数の選択肢から1つだけ選ぶ。
チェックボックス	`<input type="checkbox">`	複数の選択肢から0個以上選ぶ。
送信ボタン	`<input type="submit">`	フォームデータを送信する。
パスワード	`<input type="password">`	入力内容を伏せ字にする。

3. `<label>` 要素

<label> 要素は、入力項目に「説明ラベル」を付けます。単に文字を表示するだけでなく、アクセシビリティとユーザビリティにおいて非常に重要です。

使いやすさ: ラベルテキストをクリックするだけで、対応する入力欄にフォーカスが当たったり、チェックが入ったりします。
紐付け: <label> の for 属性と、<input> の id 属性を一致させることで両者をリンクさせます。

<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname">

4. 送信ボタン (Submit Button)

<input type="submit"> は、フォーム内のすべてのデータを、<form> タグの action 属性で指定された場所に送信するためのボタンを定義します。

<form action="/action_page.php">
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" value="太郎"><br><br>
  <input type="submit" value="送信">
</form>

5. name 属性の重要性

これ、初心者が一番忘れがちなポイントです！
各入力フィールドには必ず name 属性を指定する必要があります。

[!CAUTION]
name 属性が省略されると、その入力項目のデータはサーバーに送信されません。サーバー側では「nameの値 = 送られた中身」という形でデータを処理するため、名前がないデータは無視されてしまいます。

6. フォームの属性 (Form Attributes)

データを「どこに」「どうやって」送るかを制御する主要な属性です。

action: フォームデータを処理するサーバー側のプログラム（URL）を指定します。
method: データを送信する際のHTTPメソッドを指定します。

GET: URLの末尾にデータを付与して送信します（検索フォームなど、秘匿性の低いデータ向き）。
POST: データの通信内容（ボディ）に含めて送信します（パスワードや個人情報、大容量のデータ向き）。

7. まとめ

HTMLフォームは、ユーザーとWebサイトとの「会話」を成立させるインターフェースです。

ポイント	詳細
構造	`<form>` 内に要素を配置する。
ラベル	`<label>` と `id` を紐づけてクリックしやすくする。
送信準備	`name` 属性を忘れずに設定する。
メソッド	セキュリティが必要な場合は `method="POST"` を選ぶ。

フォームは、どんなにデザインが凝っていても「正しくデータが届かない」と意味がありません。まずはこの基本構造をしっかりマスターしましょう。

1. <form> 要素

2. <input> 要素

3. <label> 要素