HTMLフォームのaction・method属性とは？送信先と送信方法の書き方を初心者向けに解説

2026年8月25日2026年10月12日

HTMLフォームの送信先と送信方法を学ぶaction・methodのアイキャッチ

入力欄と送信ボタンは作れたものの、「送信先には何を書けばよいのだろう」と迷っていませんか。フォームの送信先と送信方法を決めるのが、form要素のaction属性とmethod属性です。

actionにはデータを受け取るURL、methodにはGETやPOSTなどの送信方法を書きます。問い合わせ内容を保存したりメールで届けたりするには、そのURLでデータを受け取って処理するプログラムやサービスも必要です。

この記事では、問い合わせフォームを例に、受信側の指定をHTMLへ反映する書き方を確認します。受信側がまだなくても、入力欄と送信項目の対応までは練習できます。送信を試せる条件と、試した後の確認箇所も順に見ていきましょう。

この記事で分かること

action属性とmethod属性の役割
送信先URLを相対パス・絶対URLで書く方法
GETとPOSTの基本的な違いと選び方
name=valueが送信先へ届く仕組み
フォームを送信できないときの確認順

action・method属性の役割

actionとmethodは、どちらもform要素の開始タグへ指定します。

<form action="/contact/submit" method="post">
  <!-- 入力部品と送信ボタン -->
</form>

ここでいう「受信側」とは、フォームから送られたデータを受け取って処理するプログラムやサービスのことです。

/contact/submitは説明用のURLです。実際に送信するには、このURLでデータを受け取る処理を別途用意する必要があります。

属性	役割
`action`	フォームデータを処理する送信先URL
`method`	送信に使うHTTPメソッド

actionは「どこへ」、methodは「どの方法で」を指定する属性と覚えると、2つの役割を区別できます。

MDNのform要素リファレンスでも、actionは送信された情報を処理するプログラムのURL、methodはフォーム送信に使うHTTPメソッドとして説明されています。

HOAI Point

actionとmethodは、フォーム画面ではなく受信側の仕様に合わせて決めます。先に送信先URL・HTTPメソッド・必要な項目名を確認すると、見た目だけ完成した「送れないフォーム」を避けられます。

フォーム全体の要素構成を先に確認したい場合は、HTMLのform・input・label・buttonの違いも参考にしてください。

action属性と送信先URLの書き方

action属性には、フォームデータを受け取り、検索・登録・メール送信などの処理を行うURLを指定します。

<form action="/search" method="get">

この例は検索フォーム用の送信先です。フォームデータを同じサイトの/searchへ送り、そのURLで検索処理を行う仕組みが必要です。URLの文字列を書くだけで、検索機能が作られるわけではありません。

相対URL・ルート相対URL・絶対URLの書き方

送信先は、現在の文書との位置関係やサイト構成に応じて書き分けます。次の表では、フォームのあるページをhttps://example.com/contact/form.htmlとし、基準URLを変えるbase要素は使っていないものとします。

actionの値	解決される送信先
相対URL `submit`	`https://example.com/contact/submit`
ルート相対URL `/submit`	`https://example.com/submit`
絶対URL `https://example.com/submit`	`https://example.com/submit`

submitは現在のページがある階層（ディレクトリ）、/submitはサイトの最上位（ルート）を基準にします。この例では、それぞれ/contact/submitと/submitになります。受信側の実際のURLと一致する書き方を選びましょう。アプリが/app/配下にある場合も、先頭の/が/app/を自動で補うことはありません。

HOAI Point

相対URLを使うときは、どのURLを基準に解決されるかまで確認します。submitと/submitは、ページがサブディレクトリにあると異なる送信先になることがあります。

actionの省略と空文字の違い

actionを省略すると、フォームがある現在の文書URLへ送信します。同じURLで受信処理も行う構成なら、省略する書き方を使えます。

action=""でもブラウザーは現在の文書URLを使います。ただし、HTMLの仕様では、actionを記述する場合の値は空でない有効なURLと定められています。同じページへ送る意図なら属性を省略し、別の送信先なら有効なURLを明示しましょう。

この違いはHTML Standardのaction属性の定義（英語）で確認できます。送信ボタンのformactionによる上書きは、後半で説明します。

<form method="post">
  <!-- action属性を省略。現在の文書URLへPOSTする -->
</form>

別ドメインへ送信するときの確認事項

絶対URLを使えば別ドメインも指定できます。ただし、外部サービスがそのフォーム送信を受け付けていること、要求される項目名・方式・認証・利用規約を満たすことを確認してください。URLだけを外部サイトへ向けても、任意のデータを受け取ってもらえるわけではありません。

method属性とGET・POSTの基本

method属性は、フォーム送信に使うHTTPメソッドを指定します。HTTPメソッドとは、サーバーへどの種類の処理を求めるかを表すものです。通常のフォーム送信では主にgetとpostを使います。ブラウザーからサーバーへ送る要求全体を「HTTPリクエスト」と呼びます。

項目	GET	POST
送信位置	URLの末尾	リクエストの本文
主な用途	検索・絞り込み	登録・更新・問い合わせ
URL表示	表示される	通常は表示されない
指定値	`get`	`post`

methodを省略した場合や、psotのように無効な値を書いた場合はGETになります。問い合わせや登録フォームをPOSTで送る場合は、method="post"のつづりまで確認しましょう。

なお、dialogという値もありますが、これはdialog要素内のフォームでダイアログを閉じるためのもので、サーバーへデータを送信しません。ここでは通常の送信に使うGETとPOSTを扱います。

GETはデータをURLへ付けて送る

method="get"では、フォームデータがactionのURLへ?でつながります。この?以降のデータ部分を「クエリー文字列」といいます。

<form action="/search" method="get">
  <label>
    キーワード
    <input type="search" name="q">
  </label>
  <button type="submit">検索</button>
</form>

たとえばHTML formと入力すると、次のようなURLへ移動します。

/search?q=HTML+form

ブラウザーは送信時に、空白を+などの形式へ自動的に変換します。このように、送信できる形へ文字を変換することをURLエンコードといいます。

検索条件を共有・再読み込みしやすい一方、URLへ含めたくない情報には向きません。

POSTはデータをリクエスト本文へ入れて送る

method="post"では、フォームデータはHTTPリクエストの本文（URLとは別に用意される送信データ部分）として送られます。問い合わせ内容やアカウント登録など、サーバー側の状態を変える処理で一般的に使われます。

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

問い合わせフォームでは、受信側がPOSTを受け付けることを確認し、method="post"を明示するとコードの目的が伝わりやすくなります。

POSTとHTTPSの違い

POSTは値がURLに出にくい送信方法ですが、それだけで通信が暗号化されるわけではありません。個人情報や認証情報を扱うフォームでは、POSTの指定とは別にHTTPSが必要です。

通信にはHTTPSを使い、フォームを表示するページと送信先の両方を確認します。送信方法と受信処理の関係は、MDNのフォームデータの送信でも確認できます。

HOAI Point

「URLに見えない」と「安全に暗号化されている」は別の話です。送信方法はGET／POST、通信経路の保護はHTTPS、入力値の検証や保存時の保護はサーバー側、と役割を分けて考えます。

送信方法を決めるときは、処理の目的と受信側が受け付ける方法をそろえます。URLに値を出したくないという理由だけでGETからPOSTへ変えても、受信側がPOSTに対応していなければ動きません。

action・method属性を使ったフォームの書き方

ここからは問い合わせフォームを作ります。受信側が用意できている場合は、指定を確認してSTEP 3の送信テストまで進んでください。まだHTMLを学習している段階なら、例のコードで入力欄を表示し、属性と項目名の対応を確認するところまでで構いません。例のURLへ送信しても、問い合わせを受け付ける機能はできません。

STEP

受信側の仕様を確認する

実際に送信する場合は、受信側が指定する次の3点を先に確認します。以下の値は、この記事で使う例です。

送信先URL：/contact/submit
送信方法：POST
必要な項目名：name、email、message

フォームサービスを使う場合は、その設定画面や説明書で確認します。開発担当者が受信処理を用意する場合は、「送信先URL・GETかPOSTか・必要な項目名」を担当者に確認してください。指定が分からないまま値を決めず、学習用の表示確認まで進めます。フォームサービスの指定コードがある場合は、隠し項目や認証用の値も含め、その指定を優先します。

STEP

form要素へactionとmethodを書く

<form action="/contact/submit" method="post">
  <p>
    <label for="user-name">お名前</label>
    <input type="text" id="user-name" name="name" required>
  </p>

  <p>
    <label for="user-email">メールアドレス</label>
    <input type="email" id="user-email" name="email" required>
  </p>

  <p>
    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="message" required></textarea>
  </p>

  <button type="submit">送信する</button>
</form>

HTMLファイルのbody内へこの例を置きます。既存のformの中には貼り付けないでください。実際に送る場合は、action・methodと各入力部品のnameを、STEP 1で確認した指定へ合わせます。type="submit"は送信ボタン、requiredは入力必須を表します。

name="name"では、左のnameが属性名、引用符内のnameが「お名前」の送信項目名です。右側はHTMLの固定語ではなく、受信側が指定する名前に合わせます。入力欄のidとlabelのforは同じ値にして、表示ラベルと入力欄を結び付けています。

inputのnameとvalueの基本はHTMLのinputタグの書き方、ボタンの種類はHTMLのbuttonタグの書き方で確認できます。

STEP

保存し、準備状況に合わせて確認する

このHTMLはフォーム画面と送信リクエストを作りますが、/contact/submitでデータを受け取る処理までは作りません。HTMLだけでは、受信・保存・メール送信・完了画面の生成は完結しません。

変更したHTMLを保存し、ブラウザーでページを開き直すか再読み込みします。受信側がまだない場合は、3つの入力欄と送信ボタンが表示されること、コードのnameが「お名前→name」「メールアドレス→email」「お問い合わせ内容→message」に対応することを確認します。ここまで確認できれば、HTML側の練習は終了です。送信ボタンは押さず、受信側を用意してから続きを試しましょう。

受信側の準備と送信許可がそろったら、テスト環境で名前にテスト太郎、メールアドレスにuser@example.com、内容に動作確認ですと入力し、「送信する」を1回押します。メールの到着まで試す場合は、自分が管理するテスト用アドレスを使います。

受信側の管理画面、または処理の記録（ログ）で、name・email・messageが入力どおり届き、予定した保存や通知が行われたことを確認します。画面が切り替わっただけでは成功と判断しません。3項目の受信と予定した処理を確認できれば、送信テストは終了です。自分で記録を見られない場合は、受信処理の担当者に確認を依頼します。

404（送信先が見つからない）や405（送信方法が許可されていない）などが表示されたら、続けて何度も送らず、次の症状別の確認へ進みます。受信側が未準備なら、先に受信処理やフォームサービスの設定を整えてください。

name=valueが送信先へ届く流れ

フォーム送信では、入力部品のnameと入力値が組になります。図は、先ほどの問い合わせフォームからメールアドレス1項目を取り出した説明用の図解です。入力欄の値が送信用の形に変わり、POSTの本文として受信側へ届く対応を示します。

name="email"の入力値user@example.comがemail=user%40example.comに変換され、POSTの本文で/contact/submitへ送られる図

大まかな流れは次のとおりです。

利用者が入力部品へ値を入力する
送信ボタンを押す
ブラウザーが送信対象の項目をname=valueの組としてまとめる
methodに従ってGETまたはPOSTのリクエストを作る
actionで指定したURLへ送る
サーバー側がデータを検証・処理し、処理結果（レスポンス）を返す

この例は、送信データの形式を決めるenctype属性を省略した通常のフォームです。既定の形式はapplication/x-www-form-urlencodedで、name="email"の入力欄へuser@example.comと入力すると、次の組が送られます。ファイルを送るmultipart/form-dataなどではデータの形が異なります。

email=user%40example.com

%40は@がURLエンコードされた表記です。ここでいうvalueは、テキスト入力欄では利用者が入力した現在の値を指し、HTMLにvalue属性を必ず書くという意味ではありません。

入力部品にnameがなければ、その値は通常のフォーム送信データへ含まれません。画面に値が見えていても、受信側で項目が空になるときは最初にnameを確認してください。

nameがあっても、disabledの部品や未選択のチェックボックス・ラジオボタンなどは送信対象から外れます。必要な項目が届かないときは、入力部品の状態も確認しましょう。

ブラウザーの入力チェックは利用者の入力ミスを減らす仕組みです。requiredやpatternの書き方はHTMLフォームの入力チェックで確認できます。ただし、ブラウザー側の検証は回避できるため、サーバー側でも必ず検証します。

よくある間違いと送信できないときの確認方法

送信を試せる状態なのにうまくいかないときは、症状から確認箇所を選びます。何も起きない場合は入力条件と送信ボタン、404・405などが出る場合は送信先と方法、特定の項目だけ届かない場合はnameを確認しましょう。

何も起きないときの入力条件

requiredの空欄やメールアドレスの形式違いがあると、通常は送信前にブラウザーが止めます。エラーが示された欄を直して再度送信してください。requiredを削除して通すのではなく、条件を満たすテスト値で確認します。入力条件に問題がなければ、下の送信ボタンの種類を確認します。

actionのURLが存在しない・基準が違う

action="submit"を相対URLとして書いた結果、想定と違う階層へ送っていることがあります。前の相対URLの表で送信先を確かめ、受信側の受付URLと照合します。404はURLや受付処理、405は受信側が許可する送信方法を調べる手がかりです。

送信後に別ページへ転送（リダイレクト）される構成では、最後のアドレスだけで元の送信先を判断できません。ブラウザーに付属する調査機能「開発者ツール」で最初の送信リクエストを見るか、受信側の処理記録と照合します。確認できない場合は、送信時刻・入力したテスト値・表示されたエラーを受信処理の担当者へ伝えると、該当する記録を探しやすくなります。

nameがない、または受信側の項目名と違う

次の入力欄は画面上では入力できますが、nameがないため値が通常のフォームデータへ入りません。

<input type="email" id="email">

受信側がemailを期待するなら、name="email"を追加します。idはlabelとの関連付けなどに使いますが、送信項目名の代わりにはなりません。

methodと受信側が一致していない

HTMLがPOSTを送っているのに受信側がGETだけを受け付ける、またはその逆では処理できません。フォームとサーバー側の受付URL設定の両方を確認します。

送信ボタンがsubmitになっていない

type="button"は通常のボタンであり、クリックしただけではフォームを送信しません。JavaScriptで別の処理を行う意図がなければ、送信ボタンはtype="submit"にします。

form要素を入れ子にしている

HTMLではform要素の中に別のform要素を入れられません。複数の送信処理が必要でも、formを入れ子にせず、それぞれを兄弟要素として分けます。

POSTなら安全だと思い込んでいる

POSTでも、HTTPのままなら転送中のデータは暗号化されません。HTTPSを使用し、サーバー側の入力検証、第三者からの不正送信を防ぐCSRF対策、アクセス制御、ログや保存データの扱いも設計します。

HOAI Point

属性を一度に変えず、症状に合う1か所を直して再確認します。送信先・送信方法・項目名を受信側の仕様と照合し、正しいデータが受信され、予定した処理ができれば終了です。ブラウザーの表示だけで分からないときは、開発者ツールや受信側のログで実際のリクエストを確認します。

送信ボタンごとのformaction・formmethod

通常はform要素のactionとmethodが使われますが、送信ボタン側のformactionとformmethodで、そのボタンから送信するときだけ値を上書きできます。

<form action="/article/publish" method="post">
  <label for="article-title">記事タイトル</label>
  <input type="text" id="article-title" name="title">

  <button type="submit"
          formaction="/article/preview"
          formmethod="get">
    プレビュー
  </button>

  <button type="submit">保存する</button>
</form>

ここでは問い合わせフォームとは別に、記事のプレビューと保存で送信先を分ける例を使っています。「プレビュー」はGETで/article/previewへ、「保存する」はフォーム本来のPOSTで/article/publishへ送ります。これらのURLも説明用です。まずはform側へ1組だけ指定し、ボタンごとに送信先や方法を変える必要があるときに使いましょう。

よくある質問

action属性は必ず書く必要がありますか？: 必須ではありません。省略すると現在の文書URLへ送信します。同じURLで受信処理をする場合は省略でき、別の送信先なら有効なURLを明示します。空文字でも現在のURLへ送る挙動になりますが、記述する値は空でないURLとするのが仕様に沿った書き方です。
method属性を省略するとどうなりますか？: GETになります。無効な値を書いた場合もGETになるため、POSTを使うときはmethod="post"と正しく指定します。省略やつづり間違いで、入力値がURLへ付かないよう確認してください。
actionにはPHPファイルしか指定できませんか？: いいえ。送信を受け付けるURLであれば、PHPファイル、Webフレームワークの受付URL設定、CMS機能、外部フォームサービスなどを指定できます。大切なのは、受信側が要求するURL・HTTPメソッド・項目名に合わせることです。
POSTならパスワードや個人情報を安全に送れますか？: POSTだけでは暗号化されません。通信にはHTTPSを使い、サーバー側でも入力検証、認証、権限、ログ、保存方法を適切に設計してください。パスワードをURLへ含めないことも重要です。
actionを別ドメインにしてもよいですか？: 仕様上は絶対URLを指定できます。ただし、外部サービスがフォーム送信を許可しているか、必要な認証・項目・利用規約を満たすかを確認します。知らない第三者サイトへ利用者の入力値を送らないでください。
HTMLだけで問い合わせメールを送れますか？: 通常はできません。HTMLは入力画面と送信リクエストを作る役割で、メール送信にはサーバー側プログラム、CMSのフォーム機能、または外部フォームサービスが必要です。

まとめ

action属性はフォームデータの送信先URL、method属性はGETまたはPOSTなどの送信方法を指定します。まず受信側の仕様を確認し、同じURL・HTTPメソッド・nameをHTMLへ反映することが大切です。

GETは主に検索などの取得、POSTは登録・更新・問い合わせなどで使われます。ただしPOSTは暗号化ではないため、個人情報を扱うときはHTTPSとサーバー側の安全対策が欠かせません。

受信側がまだない場合は、入力欄を表示し、action・method・nameの対応を確認するところまで進めましょう。受信側が用意できたらテスト送信し、正しい項目の受信と予定した処理を確認します。うまくいかないときは、入力条件・送信先と方法・項目名の順に症状と照合して、原因を絞ってください。