Formのsubmitとは？

Webサイトで会員登録やアンケート、お問い合わせなどをするときによく見かける「送信ボタン」。このボタンをクリックすると、入力した情報がWebサイトに送られますが、この背後では「submit」という仕組みが働いています。今回は、この「submit」について詳しく解説していきます。

Formとsubmitの関係

「submit」は、HTMLの「form」要素と密接に関係しています。「form」要素は、Webページ上にデータを入力するための領域を作るための要素であり、「フォーム」と呼ばれることもあります。フォームには、氏名やメールアドレスを入力するためのテキストボックス、性別を選択するためのラジオボタン、お問い合わせ内容を入力するためのテキストエリアなど、様々な入力項目を含めることができます。

そして、「submit」は、このフォームに入力されたデータを集めて、サーバーと呼ばれるWebサイトのデータを管理しているコンピュータに送信する役割を果たします。つまり、「submit」はフォームに入力されたデータを送信するための指令のようなものと言えるでしょう。

Formの構造とsubmitの役割

具体的な例を見ていきましょう。下記は、シンプルな問い合わせフォームのHTMLコードです。


<form action="/send_inquiry" method="post">
  <label for="name">氏名:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="message">お問い合わせ内容:</label>
  <textarea id="message" name="message" required></textarea>
  <br>
  <button type="submit">送信する</button>
</form>

このコードでは、<form>タグで囲まれた部分がフォームを表しています。フォームの中には、氏名、メールアドレス、お問い合わせ内容を入力する欄がそれぞれ用意されています。そして、最後の<button type="submit">送信する</button>の部分が、データを送信するためのボタンになっています。

ユーザーがこのフォームに情報を入力し、「送信する」ボタンをクリックすると、ブラウザはフォームに入力されたデータを収集し、action属性で指定されたURL（この例では"/send_inquiry"）に送信します。送信方法はmethod属性で指定され、"post"または"get"のいずれかを指定します。送信されたデータは、サーバー側で処理され、例えばメール送信やデータベースへの保存などが行われます。

submitの動作を制御する

submitの動作は、JavaScriptを使って制御することも可能です。例えば、フォームの送信前にJavaScriptで入力値のバリデーション（入力内容のチェック）を行うことができます。バリデーションに失敗した場合は、submitを中断し、エラーメッセージを表示することもできます。

JavaScriptを使ってsubmitを制御することで、よりユーザーフレンドリーなフォームを作成することができます。

まとめ

「submit」は、Webサイトでユーザーが入力した情報をサーバーに送信するための重要な仕組みです。form要素と連携して動作し、Webサイトの様々な機能を実現する上で欠かせない役割を担っています。

参考資料

よくある質問

質問	回答
submitボタンを押した際に、ページ遷移せずにデータを送信することはできますか？	はい、可能です。JavaScriptとAjaxを用いることで、ページ遷移せずにデータの送受信を行うことができます。
submitするデータの送信先はどこで指定するのですか？	formタグの"action"属性で指定します。
submitするデータの送信方法には、どのような種類がありますか？	主に"GET"と"POST"の2種類があります。GETはURLにデータを含めて送信する方法で、POSTはHTTPリクエストのボディにデータを含めて送信する方法です。

その他の参考記事:jquery submit