閉じる

HTMLのformタグにおけるactionとmethodの違いをわかりやすく解説

広告

HTMLでフォームを作成する際、もっとも基本的でありながら重要な設定がaction属性とmethod属性です。

これらの属性を正しく理解し設定しなければ、ユーザーが入力した情報を正しくサーバーに届けたり、セキュリティを確保したりすることができません。

Web開発を始めたばかりの方にとって、これら二つの属性の役割の違いは少し分かりにくい部分かもしれません。

本記事では、action属性とmethod属性の具体的な役割から、状況に応じた使い分けのポイントまでを初心者の方にも分かりやすく詳しく解説します。

目次 [ close ]
  1. HTMLフォームの基本構造
  2. action属性の役割と使い方
    1. URLの指定方法
    2. action属性を省略した場合の挙動
  3. method属性の役割とGET・POSTの違い
    1. GETメソッドの特徴
    2. POSTメソッドの特徴
  4. GETとPOSTの比較一覧表
  5. 具体的な実装例
    1. 検索フォーム（GETメソッド）の例
    2. ログインフォーム（POSTメソッド）の例
  6. セキュリティ上の注意点
  7. 2026年現在のトレンド：JavaScriptとの連携
  8. まとめ

HTMLフォームの基本構造

HTMLのフォームは、<form>タグを使用して構築されます。

このタグの中で最も頻繁に使用される属性が、送信先を定義するaction属性と、送信手段を定義するmethod属性です。

基本的な構文は以下のようになります。

HTML
<!-- 基本的なフォームの構造 -->
<form action="process.php" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <button type="submit">送信</button>
</form>

action属性の役割と使い方

action属性は、フォームの送信ボタンが押されたときに「データをどこへ送るか」という送信先のURLを指定するものです。

一般的には、サーバーサイドで動作するPHPやPython、Node.jsなどのプログラムファイルを指定します。

URLの指定方法

action属性には、絶対パスと相対パスのどちらでも指定が可能です。

同一サーバー内のファイルを指定する場合は、action="/contact/complete.php"のように相対パスで記述するのが一般的です。

一方で、外部のAPIや別のドメインのサービスにデータを送信する場合は、https://から始まる絶対パスを記述します。

action属性を省略した場合の挙動

もしaction属性を空欄にしたり省略したりした場合は、現在表示しているページのURLに対してデータが送信されます。

これは同じページ内でエラーチェックを行ったり、自身のページをリロードして処理を完結させたりする場合に利用されます。

method属性の役割とGET・POSTの違い

method属性は、データを送信する際の「通信手段（HTTPメソッド）」を指定します。

HTMLフォームで使用される主な値は、GETとPOSTの二種類です。

この二つの使い分けは、セキュリティや利便性の観点から非常に重要です。

GETメソッドの特徴

GETメソッドは、送信するデータをURLの末尾に付加して送信する方式です。

URLの後ろに?name=valueという形式でデータが表示されるため、ブラウザの履歴に残ります。

検索エンジンの検索窓や、フィルタリング機能など、情報の取得を目的とする場合に向いています。

POSTメソッドの特徴

POSTメソッドは、送信するデータをHTTPリクエストの「ボディ」と呼ばれる部分に含めて送信する方式です。

URLにデータが表示されないため、パスワードや個人情報などの機密性の高い情報を送信する際に適しています。

また、GETにはURLの長さに制限がありますが、POSTは大量のデータを送信することが可能です。

GETとPOSTの比較一覧表

それぞれの違いを理解しやすいように、以下の表にまとめました。

項目GETメソッドPOSTメソッド
データの位置URL（クエリパラメータ）に含まれるHTTPリクエストのボディに含まれる
表示URLに表示されるURLに表示されない
データ量制限あり（URLの最大長に依存）ほぼなし（サーバー設定に依存）
セキュリティ低い（機密情報には不向き）比較的高い
ブックマーク可能（検索結果の保存など）不可能
主な用途検索、ページ遷移、フィルタ登録、ログイン、ファイルアップロード

具体的な実装例

ここでは、それぞれの用途に合わせた具体的なコード例を紹介します。

検索フォーム（GETメソッド）の例

検索キーワードを送信する場合は、URLを共有できるGETメソッドを使用するのがベストプラクティスです。

HTML
<!-- サイト内検索のフォーム例 -->
<form action="/search" method="get">
    <input type="text" name="q" placeholder="キーワードを入力">
    <button type="submit">検索</button>
</form>

このフォームで「HTML」と検索すると、送信先のURLは /search?q=HTML となります。

ログインフォーム（POSTメソッド）の例

ユーザー名やパスワードなど、外部に知られてはいけない情報を送る場合は、必ずPOSTメソッドを使用します。

HTML
<!-- ログインフォームの例 -->
<form action="/login" method="post">
    <div>
        <label for="id">ユーザーID:</label>
        <input type="text" id="id" name="user_id">
    </div>
    <div>
        <label for="pass">パスワード:</label>
        <input type="password" id="pass" name="password">
    </div>
    <button type="submit">ログイン</button>
</form>

この場合、送信ボタンを押してもパスワードがブラウザのURL欄に表示されることはありません。

セキュリティ上の注意点

method属性をPOSTにするだけでセキュリティが完璧になるわけではありません。

POST送信であっても、通信経路を暗号化するためにHTTPS（SSL/TLS）を導入することが必須です。

HTTPのまま送信すると、POSTデータであってもネットワーク上で盗聴されるリスクがあります。

現代のWeb制作においては、常時SSL化された環境でフォームを運用するのが当たり前のルールとなっています。

2026年現在のトレンド：JavaScriptとの連携

近年のフロントエンド開発では、<form>タグのactionやmethodを直接動作させるだけでなく、JavaScript（Fetch API）を介して非同期で送信する手法が増えています。

しかし、JavaScriptが動作しない環境への配慮や、コードの可読性を保つために、HTML本来の属性を正しく設定しておくことは依然として重要です。

基本的な仕組みを理解しているからこそ、応用的な非同期通信も正しく扱えるようになります。

まとめ

HTMLのformタグにおけるaction属性とmethod属性は、フォーム機能の根幹を支える設定です。

actionは「どこへ送るか（送信先URL）」を指し、methodは「どうやって送るか（送信方式）」を決定します。

情報の検索にはGETを、個人情報の送信やデータの更新にはPOSTを使うという原則を常に意識しましょう。

これらの違いを正しく理解し使い分けることで、ユーザーにとって安全で使いやすいWebサイトを構築することができます。

まずはシンプルなフォームを作成し、ブラウザのURL欄がどのように変化するかを実際に確かめてみるのが理解への近道です。

URLをコピーしました！