HTML フォーム <form> タグ

JPKODA 編集部 May 6, 2026

あらゆるインタラクティブな Web サイトの核となるのは、ユーザーの情報を収集する能力です。HTML フォームはそのインタラクションに構造を与え、入力されたデータを処理のためにサーバーへ送信することを可能にします。

この構造において、<form> タグはフォームを構成するすべてのインタラクティブな要素を収めるコンテナ（Container）として機能します。

<form> タグとその属性の使い方をマスターすることは、効率的でユーザーフレンドリーな Web アプリケーションを構築するための鍵となります。本章では <form> タグを全面的に解析し、インタラクティブなフォーム作成の第一歩を案内します。

1. `<form>` タグを理解する

HTML における <form> タグは、ユーザー入力を収集するためのフォームを定義します。これは、テキストボックス、チェックボックス、ラジオボタン、送信ボタンといった様々なフォーム要素をまとめる「大きなパッケージ箱」のようなものです。

<form> タグ自体はページ上で視覚的には現れません。その主な役割は、関連する入力要素を論理的にグループ化し、収集されたデータがどのように送信されるべきかを定義することにあります。

1.1 基本構文

<form>
</form>

<form> の開始タグと終了タグの間に置かれた HTML 要素は、すべてそのフォームの一部として扱われます。これにより、フォーム要素を体系的に整理できます。

例：

<form>
  <label for="name">氏名：</label><br>
  <input type="text" id="name" name="name"><br><br>
    
  <label for="email">メールアドレス：</label><br>
  <input type="email" id="email" name="email"><br><br>
    
  <input type="submit" value="送信">
</form>

この例では、<form> タグの中に 2 つのラベル（label）、2 つの入力ボックス（氏名用とメール用）、および送信ボタンが含まれています。これらが一つの完全なフォームとしてパッケージ化されています。

2. `<form>` タグのコア属性

<form> タグには、フォームの挙動とデータ処理方法を制御する非常に重要な属性がいくつかあります。その中でも最も核心となるのが action と method です。

2.1 `action` 属性

action 属性は、フォームが送信されたときにデータを送信する先の URL を指定します。この URL は通常、データを処理するサーバー側のスクリプトやアプリケーションを指します。

構文：

<form action="送信先URL"></form>

実際の活用シーン：

PHP スクリプトに送信：

<form action="process_form.php" method="post"></form>

フォームデータはサーバー上の process_form.php ファイルに送信されます。このファイル内の PHP コードがデータを受け取り、データベースへの保存やメール送信などを行います。

API インターフェースに送信：

<form action="https://api.example.com/submit" method="post"></form>

データは API エンドポイントに送信されます。モダンな Web 開発において、フロントエンドとバックエンドを分離している場合によく使われる手法です。

現在のページに送信：

<form action="" method="post"></form>

action 属性を空にすると、データはそのフォームが含まれているのと同じページに送信されます。これは通常、サーバー側スクリプトと組み合わせて、同一ページ内で処理と結果表示を行う際に使用されます。

2.2 `method` 属性

method 属性は、フォームデータを送信する際に使用する HTTP メソッド を規定します。最も一般的に使用されるのは GET と POST です。

構文：

<form method="GET または POST"></form>

2.2.1 GET メソッド

GET メソッドは、フォームデータを URL の末尾に付加し、クエリ文字列（Query string）を形成します。

適用シーン: 少量の非機密データ（検索クエリなど）の送信に適しています。
特徴: データがブラウザのアドレスバーに表示されるため、ブックマークに保存したり共有したりすることが可能です。
制限: GET リクエストにはデータ長の制限があります（通常 2048 文字程度）。

GET の例：

<form action="search.php" method="get">
  <label for="query">検索：</label>
  <input type="text" id="query" name="query">
  <input type="submit" value="検索">
</form>

ユーザーが「HTML forms」と入力して送信すると、アドレスバーの URL は search.php?query=HTML+forms のようになります。

2.2.2 POST メソッド

POST メソッドは、フォームデータを HTTP リクエストのリクエストボディ（Body）に含めて送信します。

適用シーン: 大量のデータや機密情報（パスワード、個人プライバシー）の送信に適しています。
特徴: データが URL に表示されないため、相対的に安全です。
制限: POST リクエストにはデータ長の制限がありません。

POST の例：

<form action="login.php" method="post">
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username"><br><br>
    
  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password"><br><br>
    
  <input type="submit" value="ログイン">
</form>

このログインフォームを送信する際、ユーザー名とパスワードは HTTP ボディ内に隠されて送信されるため、URL にさらされることはありません。

GET と POST、どっちを選ぶ？

データの取得のみを目的とし（単純な検索など）、データが機密でなく、共有可能にしたい場合は GET。
サーバーの状態を変更するデータを送信したり（アカウント登録、注文、プロフィール更新）、機密情報（パスワード）を含む場合は、必ず POST を使用してください。

3. その他の重要な属性

action と method 以外にも、フォームの挙動をさらにカスタマイズする属性があります。

target: フォーム送信後のレスポンス（応答結果）をどこに表示するかを指定します。値には _blank（新しいタブ/ウィンドウ）、_self（現在のウィンドウ、デフォルト）、_parent、_top があります。リンク（<a> タグ）の target 属性と全く同じ使い勝手です。

<form action="process_form.php" method="post" target="_blank"></form>

enctype: フォームデータを送信する際のエンコーディングタイプを指定します。これはファイルアップロードを行う際に極めて重要です。デフォルト値は application/x-www-form-urlencoded ですが、ファイルをアップロードさせる場合は必ず multipart/form-data に設定する必要があります。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <label for="file">ファイルを選択：</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="アップロードプライ">
</form>

enctype="multipart/form-data" がないと、サーバーは送信されたファイルを正しく受け取ることができません。

autocomplete: ブラウザが以前の入力に基づいてフォームを自動補完（オートコンプリート）すべきかどうかを指定します。on（有効）または off（無効）を設定できます。個別の入力項目ごとに設定することも可能です。
name: 入力項目ほど頻繁には使われませんが、JavaScript やサーバー側コードでこのフォームを識別するために使用されます。

// JavaScriptで名前を使ってフォームを取得する例
const myForm = document.forms["myForm"];

novalidate: これはブール属性です。これを追加すると、フォーム送信時に入力内容の検証（バリデーション）を行いません。ブラウザ内蔵のバリデーション機能を上書きします。

<form action="submit.php" method="post" novalidate>
</form>

通常、ユーザー体験（UX）を損なわないためにも、ブラウザ側のバリデーションは有効にしておくことが推奨されます。

4. フォームのレイアウト構造

<form> がコンテナを定義しますが、内部要素の構造とレイアウトも同様に重要です。HTML 要素と CSS を適切に使用することで、フォームのデザイン性と使いやすさを大幅に向上させることができます。

4.1 よく使われるフォームのレイアウト手法

1. 基礎的な垂直レイアウト（<br> を利用）：

最もシンプルな構造で、要素を上から下へ垂直に積み上げます。

<form>
  <label for="name">氏名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="送信">
</form>

2. <p> タグで間隔を空ける：

段落タグが持つデフォルトのマージンを利用して、要素間に「呼吸感」を持たせます。

<form>
  <p>
    <label for="name">氏名：</label><br>
    <input type="text" id="name" name="name">
  </p>
</form>

3. <div> タグによる論理的なグループ化（推奨）：

関連するラベルと入力ボックスを <div> でラップします。モダンな開発において最も一般的で、CSS（Flexbox や Grid）によるレイアウト調整や JavaScript による操作が非常にしやすくなります。

<form>
  <div class="form-group">
    <label for="name">氏名：</label>
    <input type="text" id="name" name="name">
  </div>
</form>

4. テーブル <table> レイアウト（非推奨）：

初期の Web 開発ではフォームの整列にテーブルが使われていました。現在ではレイアウト制御には CSS を使用し、テーブルは純粋なデータ表示にのみ使用するのが標準です。

5. セマンティックな HTML5 要素：`<fieldset>` と `<legend>`

モダンな HTML5 では、フォームの構造とアクセシビリティ（可読性）を強化するためのセマンティックタグが提供されています。

<fieldset>: フォーム内の関連する要素を論理的にグループ化します。ブラウザは通常、この周囲に枠線を表示します。
<legend>: <fieldset> のためのタイトル（説明文）を定義します。

例：

<form>
  <fieldset>
    <legend>個人情報</legend>
    <label for="name">氏名：</label><br>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">メールアドレス：</label><br>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>連絡方法の希望</legend>
    <label for="phone">電話番号：</label><br>
    <input type="text" id="phone" name="phone"><br><br>
    <label for="contact_method">希望の連絡手段：</label><br>
    <select id="contact_method" name="contact_method">
      <option value="email">メール</option>
      <option value="phone">電話</option>
    </select>
  </fieldset>

  <input type="submit" value="送信">
</form>

この例では、フォームが「個人情報」と「連絡方法の希望」の 2 つのブロックに明確に分かれています。これは視覚的に分かりやすいだけでなく、スクリーンリーダーがフォーム構造をより正確に理解するのにも役立ちます。

1. <form> タグを理解する