【JavaScript】form submitとは？フォーム送信の基本から実践的な使い方まで初心者向けに解説

フロントエンド開発•
JavaScript

はじめに

フォームはユーザーが入力した情報をサーバーに送信し、処理を行うための大切な窓口です。
たとえば、ユーザー登録やお問い合わせなどのシーンではフォームが使われることが多いでしょう。
このフォーム送信のプロセスをJavaScriptから制御すると、入力内容のチェックや画面遷移をコントロールするなど、より柔軟な操作ができるようになります。

とはいえ、JavaScriptでフォームを操作することに慣れていない初心者の方にとっては、送信の仕組みやコードの書き方が少し難しく感じるかもしれません。
そこで本記事では、JavaScript form submit と呼ばれる機能やイベントを中心に、フォームの基本的な送信方法から実践的な活用までを順を追って解説していきます。

フォーム送信の仕組みを学ぶと、ユーザーの入力内容を検証したり、デフォルトの動きをキャンセルして非同期通信に切り替えたりといった操作が可能になります。
記事を読み進めることで、初心者の方でもフォーム送信の流れをスムーズに把握できるようになるでしょう。

この記事を読むとわかること

  • フォーム送信の基本的な仕組み
  • JavaScriptでform submitを扱う方法
  • イベントリスナーを使って動作を制御する手順
  • ファイル送信やGET/POSTの違いなど具体的な活用シーン

ここから先は、フォームに関連するHTMLとJavaScriptの連携を一つひとつ確認しながら学びます。
自分でコードを動かしながら理解を深めるのも良いでしょう。

フォーム送信とは？

フォーム送信とは、ユーザーが入力したデータをサーバー側に送るプロセスです。
通常はユーザーがフォームに入力し、送信ボタンを押すとサーバーにHTTPリクエストが発生します。
このリクエストの中に、フォームの要素（テキストボックス、ラジオボタン、チェックボックスなど）に入力された値が含まれています。

フォーム送信の仕組みをざっくり理解

フォーム送信はHTMLの form 要素を通して行われます。
たとえば以下のようなフォームがある場合、action 属性で指定されたURLにフォームの値が送られます。
メソッド（method 属性）に GET が指定されていればクエリパラメータとして送信され、POST であればリクエストボディに含まれます。

<form action="/submit" method="POST">
  <label>ユーザー名: <input type="text" name="username"></label>
  <button type="submit">送信</button>
</form>

このフォームをそのまま使うと、ユーザーがボタンをクリックしたタイミングでブラウザがサーバーにリクエストを送ります。
フォーム送信には基本的にブラウザ任せの部分も多いため、シンプルに作りたい場合はこれで十分です。

HTTPメソッドとの関係

フォーム送信を扱う上で欠かせないのがHTTPメソッドです。
GET と POST はとくに頻出で、データの取得（GET）や送信（POST）といった目的に応じて使い分けます。
もちろん PUT や DELETE を用いる場合もありますが、初心者の方はまず GET と POST の使い分けをしっかり押さえておくと良いでしょう。

サーバー側では、受け取ったデータに対して何らかの処理を行い、結果を画面に反映します。
これこそがフォーム送信の一連の流れですが、JavaScriptを用いることで途中のプロセスを細かく制御できます。
それが JavaScript form submit を学ぶ最大のメリットと言えます。

JavaScriptでform submitを扱う基本

先ほどのHTMLフォームはボタンを押せば自動的に送信されますが、JavaScriptを利用することで送信前にバリデーションを行ったり、フォームのデータを加工してから送信したりできます。
このコントロールの鍵となるのが submitイベント です。

HTMLフォームとJavaScriptの連携

まずはHTMLフォームにJavaScriptを結びつける基本的な流れを確認しておきましょう。
ページ上に配置された form 要素を取得し、そこにイベントリスナーを設定することで、フォームが送信される瞬間をキャッチできます。

JavaScriptでは通常、document.getElementById や document.querySelector などで要素を取得し、addEventListener を使ってイベントを登録します。
以下はシンプルな例です。

<!-- index.html の例 -->
<form id="myForm" action="/submit" method="POST">
  <label>メールアドレス: <input type="email" name="email"></label>
  <button type="submit">送信</button>
</form>

<script>
  const formElement = document.getElementById("myForm");

  formElement.addEventListener("submit", (event) => {
    console.log("フォームが送信されました");
  });
</script>

このように、フォームの submit イベントをキャッチすれば、送信のタイミングで任意のコードを挿入できます。
次のセクションでは、具体的にどのようなシーンでこの処理が役立つか見ていきましょう。

基本サンプルコード

フォーム送信が実行される瞬間に何らかの処理を入れたいとき、よく利用されるのが event.preventDefault() です。
送信そのものを一時的にキャンセルし、JavaScript側で確認や加工を行った後に改めてデータを送信するといった柔軟なフローを作れます。

<form id="sampleForm" action="/submit" method="GET">
  <label>年齢: <input type="number" name="age" min="0"></label>
  <button type="submit">送信</button>
</form>

<script>
  const sampleForm = document.getElementById("sampleForm");

  sampleForm.addEventListener("submit", (event) => {
    // デフォルトのフォーム送信をキャンセル
    event.preventDefault();

    // フォームの値を取得してチェック
    const ageValue = sampleForm.age.value;
    if (Number(ageValue) < 18) {
      alert("18歳未満の方は送信できません");
      return;
    }

    // 必要に応じて送信先などを変更可能
    console.log("フォーム送信前に処理を行いました");

    // フォームを改めて送信
    sampleForm.submit();
  });
</script>

この方法を使うことで、送信前にユーザーの入力内容を精査してから送信するなど、多彩なロジックを組み込めます。
実務でも、年齢制限があるサービスや入力必須項目の確認などでよく使われる手法です。

代表的な活用シーン

フォーム送信をJavaScriptで制御するテクニックは、さまざまなシーンで応用できます。
ここでは初心者の方でもイメージしやすい例として、ユーザー登録フォームとお問い合わせフォームを取り上げます。

ユーザー登録フォーム

ユーザー登録フォームでは、パスワードの強度チェックやメールアドレスの形式チェックなど、送信前のバリデーションが重視されます。
仮にユーザーが入力をミスした状態で送信してしまうと、サーバー側でエラーメッセージを返して再入力を求めることになりますよね。
しかしJavaScriptを使えば、送信前にエラーを検知してユーザーに知らせることが可能になります。

たとえば、以下のようにパスワード強度をチェックする仕組みが考えられます。
文字数が一定未満のときや、大文字・小文字・数字が混在していない場合はアラートを出すなどのロジックを入れれば、ユーザーが入力間違いに早めに気づけるでしょう。

const password = formElement.password.value;
if (password.length < 8) {
  alert("パスワードは8文字以上にしてください");
  return;
}

そのほかにも、ユーザー名の重複チェックやプロフィール画像のアップロードなど、多岐にわたって送信前に確認すべき内容があります。
JavaScriptを活用すればこれらを柔軟に制御できるので、ユーザーにとって使いやすいフォームを実装しやすくなるのです。

お問い合わせフォーム

お問い合わせフォームでは、メールアドレスや名前、メッセージの内容をサーバーに送るケースが一般的です。
ただし、メールアドレスや電話番号の入力欄に誤りがあったり、必須項目が未入力のまま送信されたりすると、後々の対応が滞ってしまいます。

JavaScriptで送信の直前にエラーを表示してあげれば、ユーザー体験が向上します。
たとえば、以下のような流れを組み込むイメージです。

  1. 送信ボタンがクリックされる
  2. submit イベントが発火
  3. event.preventDefault() でデフォルト動作を止める
  4. メールアドレスや必須項目の入力状態をチェック
  5. エラーがあればメッセージを表示し、あればフォームを再送信

このようなフローを組むことで、サーバー側の負荷を減らしながら、ユーザーにとってわかりやすい入力環境を提供できます。

デフォルトの動作を制御するには？

上の例でも何度か触れましたが、フォーム送信時にはブラウザが自動でサーバーへリクエストを送信します。
これをデフォルトの動作と呼びます。
場合によっては「まだ送信しないでほしい」という場面が出てきますので、そのときに用いられるのが event.preventDefault() です。

preventDefault() を呼び出すと、フォームの自動送信がキャンセルされます。
それを活用すると、送信前にJavaScriptコードで必要なチェックや処理を挟んだ上で、手動で formElement.submit() を実行できるようになるわけです。

たとえば、以下のような流れをイメージしてください。

  1. ユーザーが送信ボタンをクリック
  2. submit イベントが発生
  3. preventDefault() で自動送信を止める
  4. 入力チェックやカスタム処理を実行
  5. 問題なければ formElement.submit() で改めて送信

これによって、データの検証やユーザーへの確認ポップアップを間に挟みやすくなります。

イベントリスナーを使ったフォーム送信処理

フォーム送信処理をより体系的に理解するために、イベントリスナーのしくみをもう少し深掘りしてみましょう。
JavaScriptでは addEventListener を使って、特定の要素に対して複数のイベントを追加できます。

addEventListenerでsubmitをキャッチ

フォームを指定して addEventListener("submit", callbackFunction) を呼び出すと、フォームが送信されたタイミングで指定した関数（コールバック）が実行されます。
これはボタンをクリックしたとき以外にも、エンターキーが押されたときにも発火するため、総合的にフォーム送信を監視できるのが大きな特徴です。

メリット

HTMLとJavaScriptの分離

フォームに直接 onsubmit 属性を書くよりも、JavaScriptファイル側でイベントを管理できるため、可読性が高まります。

複数のイベントが設定可能

1つのフォームで複数のイベントを扱い、ユーザーアクションに応じた多彩な挙動を追加しやすくなります。

スクリプトの一元管理

addEventListener はHTML内のあらゆる要素に対して適用できるので、プロジェクトが大規模になるほど統一的に扱いやすいです。

onclickとonsubmitの違い

初心者の方が混同しやすいのが、onclick と onsubmit の使い分けです。
onclick はボタン要素に適用されるイベントで、ボタンをクリックしたときのみ発火します。

一方で onsubmit はフォームそのものに設定されるイベントで、ボタン以外でもエンターキー操作などで送信されたときにも発火します。
フォーム送信の処理を書きたい場合は、原則として onsubmit（あるいは submit イベント）をメインで使うのがおすすめです。

もしボタンごとに個別のアクションを設定したいなら onclick を使う方法もありますが、フォーム送信の管理を行うには onsubmit あるいは addEventListener("submit", ...) の方が汎用性に優れています。

フォーム送信後に画面遷移させない方法

フォームを送信すると、一般的にはサーバーからのレスポンスを受け取り、新しいページへ移動（リダイレクト）するなどの画面遷移が起こります。
ところが、シングルページアプリケーション（SPA）のように、画面全体ではなく一部だけ更新したい場面もあるでしょう。
そういうときに便利なのが 非同期通信 (AJAX) です。

AJAXの活用例

JavaScriptでフォームの送信イベントを拾ってから、fetch や XMLHttpRequest を使ってサーバーにデータを送信する方法があります。
こうするとブラウザの画面リロードが発生せず、必要なデータだけを取得してページの一部を書き換えることができます。

フォームの例として、以下のようなHTMLを用意します。

<form id="ajaxForm">
  <label>お名前: <input type="text" name="username"></label>
  <label>コメント: <input type="text" name="comment"></label>
  <button type="submit">送信</button>
</form>

<div id="result"></div>

そしてJavaScript側では次のように記述します。

const ajaxForm = document.getElementById("ajaxForm");
const resultDiv = document.getElementById("result");

ajaxForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const formData = new FormData(ajaxForm);
  const username = formData.get("username");
  const comment = formData.get("comment");

  try {
    // サーバーにPOSTリクエストを送る例
    const response = await fetch("/api/submit", {
      method: "POST",
      body: formData
    });

    if (!response.ok) {
      throw new Error("サーバーエラーが発生しました");
    }

    const responseData = await response.text();
    resultDiv.textContent = `送信成功: ${responseData}`;
  } catch (error) {
    resultDiv.textContent = `送信失敗: ${error.message}`;
  }
});

画面全体をリロードせずに、fetch 関数でサーバーへデータを送信し、その結果を一部の要素に反映しています。
これがフォーム送信と非同期通信を組み合わせた基本的な動作イメージです。

fetchを使った送信例

上の例は最もシンプルな非同期通信の書き方です。
fetch はデフォルトだと GET メソッドになりますが、送信したい場合は POST を指定し、ボディに FormData や JSONデータを入れます。
FormData オブジェクトを使うと、ファイルアップロードを含む複雑なデータもまとめて送れるので便利です。

実務の中でも、部分的にページを更新してユーザーの体験をスムーズにしたいときに、AJAX（や fetch）を活用するケースが多々あります。

GETとPOSTの使い分け

フォームの method 属性にはいくつかの種類がありますが、初心者の方はまず GET と POST を押さえておくと良いでしょう。
この2つの使い分けでよくある疑問や注意点を取り上げます。

それぞれのメリットと注意点

  • GET

    • ブラウザのアドレスバーにパラメータとしてデータが表示される
    • ブックマークや共有がしやすい
    • 送信データ量に制限がある（ブラウザ依存）
    • 機密情報を含む場合は避けたい

  • POST

    • リクエストボディにデータを含めるので、アドレスバーには表示されない
    • 大量のデータやファイルを送るのに向いている
    • ブラウザの履歴管理には残りにくい
    • GET と比べると使いどころを間違うとページ再読み込み時などに問題が起こる可能性がある

URLパラメータに気をつける

GET はフォームデータをURLに直接付与するため、長い文字列や機密性の高い内容を送ると、第三者に見られたりURLが切れてしまったりするリスクがあります。
よって、検索クエリやページ番号などの程度であれば GET、ユーザーの個人情報やファイルを送る場合は POST といった形で使い分けるのが一般的です。

ファイル送信を伴うフォームの場合

画像ファイルやPDFなどのアップロードが必要なフォームでは、通常のテキスト入力とは少し違う扱い方をします。
HTMLでは <input type="file"> を使い、フォームの enctype 属性に multipart/form-data を指定するケースが多いです。

<form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
  <label>ファイルを選択: <input type="file" name="uploadedFile"></label>
  <button type="submit">アップロード</button>
</form>

FormDataオブジェクトの活用

JavaScriptでファイルを送信したいときには FormData オブジェクトが役立ちます。
先ほどの <input type="file"> から取得したファイルを append メソッドで追加し、非同期通信（fetch）で送信すれば、画面遷移を伴わないアップロード機能を実装できます。

const uploadForm = document.getElementById("uploadForm");

uploadForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const formData = new FormData(uploadForm);
  
  try {
    const response = await fetch("/upload", {
      method: "POST",
      body: formData
    });

    if (!response.ok) {
      throw new Error("アップロードエラー");
    }

    const data = await response.json();
    console.log("アップロード成功:", data);
  } catch (error) {
    console.error(error);
  }
});

このように、テキスト入力だけでなくファイルアップロードを含む複雑なフォームでも、JavaScriptの submit イベントと FormData を組み合わせることでスムーズな操作が可能です。

注意点

ファイルサイズが大きいとサーバーの制限に引っかかる場合や、通信時間が長くなるなどの問題が起きます。
また、ユーザーが複数のファイルをまとめてアップロードするケースもあるため、フロントエンドでファイル情報を把握しておくとトラブルシューティングしやすいでしょう。

大容量ファイルのアップロードを許可する場合は、サーバー側の設定とあわせて、ユーザーにもアップロード可能な形式・サイズをわかりやすく案内することが大切です。

まとめ

ここまで、JavaScript form submit における基本的な流れから、実際のフォーム送信でよく利用される様々なテクニックを紹介してきました。
フォーム送信はWebサービスの入り口とも言える重要な機能なので、正しい使い方を身につければ開発の幅がぐっと広がります。

デフォルト動作をキャンセルするための event.preventDefault() は、フォーム関連のカスタマイズで欠かせない要素です。
また、非同期通信（AJAX）やファイルアップロードなどを組み合わせると、画面リロードを伴わない高度なフォーム処理を実装できるでしょう。

初心者の皆さんは、まずは以下のポイントを意識して一歩ずつ学習を進めてみると良いかもしれません。

  • フォームの送信先（action）やメソッド（method）の役割を整理する
  • submit イベントを使って送信直前に何ができるかを試してみる
  • デフォルト送信を防ぎたい場合は event.preventDefault() を確実に呼び出す
  • fetch や FormData を用いて非同期通信やファイルアップロードを実装する

最初は難しく感じるかもしれませんが、実際に手を動かしてみると意外とすんなり理解できるはずです。
ぜひ自分のプロジェクトやサンプルページで試してみて、フォーム送信を自在にコントロールするスキルを身につけてください。

フォームに関連する処理は実務でも頻繁に使われるので、しっかり理解しておくと後々役立ちます。まずは基本の構文と送信時のイベント処理を理解し、徐々に応用範囲を広げていくのがおすすめです。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説