form.actionの使い方｜送信先URLの選び方【JavaScript入門】

本記事にはプロモーション（アフィリエイト広告）を含みます。

この記事は、2026年10月時点のHTML StandardとMDN Web Docsに基づいています。対象：フォーム送信のHTML標準仕様と、JavaScriptのECMAScript 2023（ES2023）までの記法。ブラウザーの個別バージョンは固定していません。

フォームの送信先を変えたいのに、作成中のページと公開後のページでURLが合わない。送信ボタンを押しても、期待したページに移動しない。そんなときは、form.actionに設定するURLの種類と、フォームの送信方法を確認しましょう。

この記事では、送信先がどのように決まるのかを、URLの具体例とサンプルで説明します。サンプルは、自分のパソコン上でページを表示する仕組みを使い、送信後に同じページを再表示します。外部サービスや専用の送信先は使いません。

手順では、Google ChromeやSafariなど、ホームページを見るためのアプリを使います。フォーム操作の基本から順に学びたい場合は、JavaScript Formロードマップ｜初心者が最短でフォーム操作を理解するためのガイドもあわせてご覧ください。

結論：送信先は環境に合うURLで指定する

form.actionには、フォームを送る先のURLを設定します。同じサイト内へ送るなら相対URLやルート相対URL、送信先のホスト名も固定したいなら絶対URLが候補です。

絶対URLは接続先の名前まで指定します。作成中のページと公開後のページで接続先が異なる場合、同じ値を使うと別の環境へ送ってしまうことがあります。「絶対URLなら常に安全」とは限りません。

相対URLは現在のページを基準に解決される

相対URLは、通常、現在のページのURLを基準にして実際の送信先が決まります。ページに送信先の基準を指定する設定がある場合は、その設定も影響します。次の表は、基準となるページをhttps://example.com/shop/form.htmlとした場合の例です。

ルート相対URLの/send.phpは、サイトがhttps://example.comとhttps://example.com/my-siteのどちらに置かれるかで、意図した場所へ届くかが変わることがあります。サイトを置く場所も含めて確認してください。

ページ内にbase要素が設定されていると、相対URLの基準が変わる場合があります。相対URLが予想と違う場所を指すときは、ページの設定も確認してください。

下の図は、同じページから各URLを指定したとき、送信先がどのように決まるかを示しています。

form.actionからURLを読むと、相対URLを設定した場合でも、基準となる場所をもとに解決されたURLとして扱われます。

form.actionとmethodは役割が違う

form.actionは送信先を、methodはデータの送り方を指定します。送信先だけ変えても、データの送り方が目的に合っていなければ、期待した送信にならないことがあります。

• GET：入力内容を送信先のURLに付けて送ります。検索条件など、URLで見えても問題のない情報に使われます。
  補足：GETとは？
  情報を受け取るときなどに使う送り方です。フォームでは、入力内容がURLに加わる形で送られます。
• POST：入力内容をURLとは別に送ります。URLに内容を表示したくないときなどに使われます。
  補足：POSTとは？
  入力内容をURLとは別の形で送る方法です。ただし、POSTを選ぶだけで情報が暗号化されるわけではありません。

どちらを使うかは送信先の仕組みや目的に合わせて決めます。POSTにすれば秘密が守られる、という意味ではありません。機密情報を含める場合は、送信先や通信方法も確認してください。

form.actionとmethodを一緒に設定する例です。送信先がPOSTを受け付ける場合は、次のように設定できます。

const form = document.getElementById("contactForm");
form.action = "/api/contact";
form.method = "post";

このコードでは、ページ内のcontactFormというフォームを見つけ、送信先と送り方を設定しています。constは、あとから別の値に入れ替えない名前を作る書き方です。送信先には、フォームの内容を受け取る仕組みが必要です。

実行結果：

form.action：現在のページの基準に解決された「/api/contact」のURL
form.method：post

フォームを含むサンプルで送信先を切り替える

始める前に、テキストエディター、Python 3、ブラウザーを用意します。ファイルを直接開くのではなく、自分のパソコン上で動くページ表示の仕組みからページを開きます。

次の例では、選択メニューから送信先の種類を選び、名前を入力して送信します。実際の送信先は同じページのままです。選んだ種類はrouteという名前の入力データとしてURLに加わり、送信後にページへ表示されます。このサンプルは、異なる窓口へ実際に振り分ける処理ではなく、送信内容を確かめる例です。

次のコード全体をform-action-sample.htmlという名前で保存します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>送信先の切り替え例</title>
</head>
<body>
  <h1>送信先の切り替え例</h1>

  <form id="contactForm" action="" method="get">
    <label for="route">送信先の種類</label>
    <select id="route" name="route">
      <option value="contact">問い合わせ</option>
      <option value="support">サポート</option>
    </select>

    <label for="name">名前</label>
    <input id="name" name="name" required>

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

  <p id="result"></p>

  <script>
    const form = document.getElementById("contactForm");
    const route = document.getElementById("route");
    const result = document.getElementById("result");

    form.action = window.location.pathname;

    const params = new URLSearchParams(window.location.search);
    const submittedRoute = params.get("route");

    if (submittedRoute === "contact" || submittedRoute === "support") {
      route.value = submittedRoute;
    }

    const name = params.get("name");

    if (name) {
      result.textContent =
        `${name}さんの入力を受け取りました。送信先の種類：${submittedRoute}`;
    }
  </script>
</body>
</html>

このコードでは、選んだ種類を送るため、選択メニューにname="route"を付けています。ここでいう属性は、入力欄などの部品に名前や設定を付けるものです。フォーム送信で送られるのは、名前と値が設定された入力項目です。送信先を現在のページにし、入力項目の値をURLに加えるのがmethod="get"です。

form.actionには現在のページのパスを設定しています。選んだ種類は送信先そのものではなく、名前と同じくフォームから送るデータです。送信後はURLからその値を読み取り、選択状態と画面の文章に反映します。

保存したファイルがあるフォルダーで、次の手順を行います。手順3では、localhostという名前を使って、自分のパソコン上で動かすページを開きます。

1. 文字でパソコンに指示を入力する画面を開き、サンプルファイルがあるフォルダーへ移動します。
2. python -m http.server 8000を実行します。環境によっては、python3 -m http.server 8000を使います。
3. ブラウザーでhttp://localhost:8000/form-action-sample.htmlを開きます。
4. 送信先の種類で「サポート」を選び、名前に「花子」と入力します。
5. 送信ボタンを押します。名前が空欄の場合は、入力を求める表示が出ます。
6. ページが再表示されたら、名前と送信先の種類が表示されていることを確認します。
7. ブラウザーのURL欄で、「route=support」と名前のデータが付いていることを確認します。

この手順で「support」を選び、「花子」と入力すると、送信後のURLにはroute=supportと名前のデータが付き、ページには名前と「support」が表示されます。日本語の名前は、URL上では文字を変換した形で表示されることがあります。

実行結果：

URLの例：
http://localhost:8000/form-action-sample.html?route=support&name=%E8%8A%B1%E5%AD%90

画面表示：
花子さんの入力を受け取りました。送信先の種類：support

フォームの送信先を同じページに設定し、選択メニューにname="route"を付けることで、選択した値も送信データに含まれます。GETでは、名前や選択内容がURLに加わります。送信後の表示は、ページを再度開いたときにURLから値を読み取って作っています。

開発環境と本番環境で送信先を切り替える

送信先のホスト名が環境ごとに異なる場合は、環境に合わせた設定値を用意し、その値をform.actionへ設定します。次の例では、ページの設定に書かれた環境名に応じて送信先を選びます。

<html lang="ja" data-environment="development">

このHTMLを開発環境で使うと、環境名はdevelopmentになります。本番環境ではproductionに変更します。続けて、フォームに次のJavaScriptを設定します。

const form = document.getElementById("contactForm");

const actionByEnvironment = {
  development: "https://dev.example.com/contact",
  production: "https://example.com/contact"
};

const environment = document.documentElement.dataset.environment;
const action = actionByEnvironment[environment];

if (action) {
  form.action = action;
} else {
  throw new Error("送信先の環境設定を確認してください。");
}

example.comは説明用の例です。実際に使うときは、開発用と本番用それぞれの正しい送信先に置き換えます。このコードは、開発環境なら開発用URL、本番環境なら本番用URLをform.actionへ設定します。

実行結果：

環境名が development の場合：
form.action は https://dev.example.com/contact

環境名が production の場合：
form.action は https://example.com/contact

それ以外の環境名の場合：
「送信先の環境設定を確認してください。」というエラーが発生し、コードによるform.actionへの代入は行われません。
フォームに別の送信先がすでに設定されている場合は、その設定が残ります。action属性がない場合や空の場合は、フォームの既定の送信先は現在のページです。

ブラウザーの開発者ツールでフォームを調べると、設定されたactionの値を確認できます。開発環境では開発用URL、本番環境では本番用URLになっていることを確かめてください。

submit()とrequestSubmit()は送信前の処理が異なる

JavaScriptから送信を始める方法には、form.submit()とform.requestSubmit()があります。どちらもフォームを送れますが、送信前の確認やイベントの動きが同じではありません。

ここでいうメソッドは、部品に用意されている処理を実行するための呼び出し方です。submit()のように、名前の後ろに括弧を付けて使います。

通常の送信ボタンと同じように入力条件の確認やsubmitイベントを通したい場合は、requestSubmit()を使います。submit()はそれらを行わずに送信するため、意図せず入力確認や送信前の処理を飛ばしてしまうことがあります。

requestSubmit()は送信ボタンを押す流れに近い方法です。ただし、フォームの設定や送信先が正しいことまで自動で保証するものではありません。送信先と入力内容を別途確認してください。

requestSubmit()の対応状況はブラウザーによって異なる可能性があります。利用するブラウザーのバージョンをMDN Web Docsの対応表で確認してください。この記事では、個別の最低対応バージョンは指定していません。

よくある失敗と確認方法

送信先が予想と違う

相対URLの基準を、サイトの入口だと思い込んでいる場合があります。現在のページのURLを確認し、表の例に当てはめて送信先を確認してください。ページ内にbase要素がある場合は、それも調べます。

開発環境から本番環境へ送ってしまう

ホスト名を含む絶対URLが、環境ごとに切り替わっていない可能性があります。環境ごとの設定値を用意し、その環境に合う値がform.actionへ設定されているかを確認します。開発環境では開発用URL、本番環境では本番用URLが表示されることを、それぞれ確かめてください。

送信ボタンを押しても送信されない

• 必須入力が空欄になっていないか確認します。
• form.actionが意図したURLになっているか確認します。
• 送信先が、設定した送り方や入力内容を受け付けるか確認します。
• JavaScriptのエラーがないか、ブラウザーの開発者ツールで確認します。
• form.submit()を使っている場合は、送信前の確認処理を通す必要があるか見直します。

URLに入力内容が表示される

method="get"では、入力内容がURLに付いて送信されます。URLに表示してよい内容か確認し、表示すべきでない情報なら送信方法や送信先の設計を見直してください。POSTに変えるだけで暗号化されるわけではないため、通信方法や受信側の安全性も確認が必要です。

送信先を決めるときの注意点

• 利用者が入力したURLを、そのままform.actionに設定しないでください。送信先を選ぶ場合は、用意した候補から選ぶなど、送信先を限定します。
• 外部のサイトへ送る場合は、送信先のホスト名と、何を送るかを確認してください。
• 個人情報や秘密の情報を送る場合は、送信先と通信方法が適切か確認してください。
• GETでは入力内容がURLに含まれるため、秘密の情報を送る用途には向きません。

公式資料で仕様を確認する

フォームの送信方法や送信前の動きを確認するときは、標準仕様やブラウザーの資料を参照してください。特にrequestSubmit()を使う場合は、利用するブラウザーの対応状況を確認してください。

• HTML Standard：フォーム送信
• MDN Web Docs：フォームのaction設定
• MDN Web Docs：フォームのsubmit()
• MDN Web Docs：フォームのrequestSubmit()