JavaScript を使用してフォームを送信する

HTML フォームを JavaScript で送信するには、通常 submitイベント を処理し、入力値を確認したうえで、有効なデータをブラウザーからフォームの action に送信します。以下の例では、フォームを作成し、フィールドの値を読み取り、クライアント側の検証で不完全な入力の送信を防ぎます。送信されたデータを使用する前に、サーバー側の検証も必ず行ってください。

HTML フォームを作成する

各コントロールに name を指定します。この値が、送信されるフォームデータのキーになります。各フィールドにアクセシブルな名前を付けるため、ラベルも設定してください。action はフォームの送信先 URL を指定し、method はブラウザーがデータを送信する方法を指定します。POST リクエストでは、フォームデータがリクエスト本文に含まれます。データをどのように処理または保存するかは、サーバー側で決まります。

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

このページのマークアップは静的な例です。フォームが有効な状態でユーザーが送信ボタンを押すと、ブラウザーは名前が設定されたコントロールの値を /signup に送信します。

フォームにアクセスする

document.getElementById() または document.querySelector() を使い、IDでフォームを選択します。次のブラウザーコードは、上記のマークアップがすでにページ内にあることを前提としています。後続の submit イベントハンドラーでも、同じ form 参照を使います。

const form = document.getElementById("signup-form");

戻り値はフォーム要素です。フォームが解析される前にスクリプトが実行される場合は、フォームの後にスクリプトを配置するか、ドキュメントの準備が整うまで待ちます。

JavaScript でフォームフィールドの値を取得する

フォームの elements コレクションを使うと、各コントロールを name で取得できます。コントロールに現在入力されているテキストは、単数形の .value プロパティから取得します。上記のフォームでは、次のように名前とメールアドレスを読み取れます。

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

HTML の name 属性は、form.elements で使うキーと一致させる必要があります。テキストをトリミングすると、値を確認する前に先頭と末尾の空白を取り除けます。

JavaScript でフォームフィールドのデータを検証する

次のヘルパー関数は、両方のフィールドに文字が入力されているかを確認します。フォームから取得した値を渡すと、ページのハンドラーで使える真偽値を返します。サンプルオブジェクトには名前とメールアドレスが設定されており、プログラムはそれらの値に対する結果を出力します。

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

ブラウザーはフォームの submitイベント を発生させる前に、required と type="email" を検証します。名前が空の場合やメールアドレスの形式が正しくない場合は、この段階で入力が拒否されます。リスナーは実行されず、preventDefault() も呼び出されず、ブラウザー独自の検証メッセージが表示されます。一方、空白だけの名前は required を通過するため、下のリスナーに渡されます。トリミングすると空文字列になり、独自のチェックが preventDefault() で送信を止め、ページにメッセージを表示します。

ページのハンドラーでは、選択したフォームにリスナーを登録し、現在の入力値を使って同じチェックを行います。

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

チェックに通った場合、ハンドラーはブラウザー標準のフォーム送信の流れを維持します。チェックに失敗した場合は、event.preventDefault() によってブラウザーからの送信を防ぎ、メッセージで修正が必要な内容を伝えます。これはユーザーへの案内を目的としたクライアント側の検証であり、セキュリティ境界ではありません。このページや JavaScript を使わずにリクエストを送ることもできるため、送信先ではサーバー側の検証が必要です。

ほかのコードから送信を開始する場合は、form.requestSubmit() を使います。通常の検証と submit イベントの流れに従うためです。form.submit() を呼び出すと、制約検証も submit イベントの発生も行わずに直接送信されるため、このようなリスナーは実行されません。