【HTML Living Standard】submit属性値の使い方

submit属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月25日

基本的な使い方

submitプロパティは、HTMLのフォーム要素において、フォームのデータをサーバーへ送信する機能に関する重要な概念を保持するプロパティです。このsubmitという値は、主に<input>要素や<button>要素のtype属性に指定されることで、その要素が特別な役割を担うことを示します。具体的にtype="submit"と指定された要素は、ユーザーによってクリックされると、その要素が属するHTMLフォームのデータを収集し、指定された宛先へ送信する役割を果たすボタンとして機能します。

データの送信時には、フォーム要素のaction属性で指定されたURLに対し、method属性で指定されたHTTPメソッド（GETやPOSTなど）を用いてデータが送られます。例えば、ファイルアップロードを含むフォームでは、enctype属性でエンコーディングタイプが指定されることもあります。また、フォームにクライアントサイドのバリデーションルールが設定されている場合、submitプロパティを持つ要素がクリックされると、データの送信に先立って自動的にこれらのバリデーションが実行されます。これにより、不正なデータがサーバーに送信されるのを防ぎ、ユーザーに適切なフィードバックを提供することが可能です。

この機能は、Webアプリケーションがユーザーからの入力データを受け付け、処理を開始するための基本的な仕組みを提供しており、インタラクティブなWebサイトを構築する上で不可欠な要素です。

公式リファレンス: <input type="submit">

構文(syntax)


1<input type="submit" value="送信">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML formでsubmitボタンが動作する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML Submitボタンの例</title>
7</head>
8<body>
9    <!--
10        <form>要素は、ユーザーからの入力を受け取り、指定されたサーバーに送信するための領域を定義します。
11        action属性はデータの送信先URLを、method属性はHTTPメソッド（GET/POSTなど）を指定します。
12    -->
13    <form action="/submit-data" method="post">
14        <label for="username">ユーザー名:</label>
15        <!--
16            <input type="text">は一行のテキスト入力フィールドを作成します。
17            name属性は、フォーム送信時にこの入力フィールドのデータを識別するための名前です。
18        -->
19        <input type="text" id="username" name="username" required>
20        <br>
21        <label for="email">メールアドレス:</label>
22        <input type="email" id="email" name="email" required>
23        <br>
24        <!--
25            <input type="submit">は、フォームのデータをサーバーに送信するためのボタンを作成します。
26            このボタンがクリックされると、フォーム内のデータがaction属性で指定されたURLへmethod属性で指定された方法で送信されます。
27            value属性は、ボタンに表示されるテキストを指定します。
28        -->
29        <input type="submit" value="アカウント登録">
30    </form>
31</body>
32</html>

HTMLにおけるsubmitは、Webページのフォームでユーザーが入力した情報をサーバーへ送信するためのボタンを作成する際に使用する、<input>要素のtype属性値です。このボタンがクリックされると、<form>要素に設定されているaction属性で指定されたURLに対し、method属性で指定されたHTTPメソッド（GETやPOSTなど）を用いて、フォーム内の全てのデータが自動的に送信されます。

submit自体には、直接的に引数や戻り値はありません。ボタンのクリックというユーザー操作に応じて、ブラウザがフォームデータの収集とサーバーへの送信という一連の処理を内部的に実行します。サンプルコードでは、「アカウント登録」と表示されたボタンがこれにあたります。ユーザーが「ユーザー名」と「メールアドレス」を入力し、このsubmitボタンをクリックすると、入力された情報が/submit-dataというURLへPOSTメソッドで送信される仕組みです。

システムエンジニアを目指す方にとって、ユーザーインターフェースからデータを収集し、バックエンドへ連携させるための最も基本的な機能の一つであり、Webアプリケーション開発の基盤となる重要な要素です。

submitボタンは、<form>要素内に配置しないと機能しません。このボタンは、action属性で指定されたサーバーのURLへ、method属性（通常はPOST）で指定された方法でフォームデータを送信します。各入力フィールドには、サーバー側でデータを受け取る際に識別するためのname属性が必須です。nameがないフィールドのデータは送信されません。また、required属性などによるブラウザ側の入力チェックはユーザー補助ですが、悪意ある操作も考慮し、サーバー側での厳格なデータ検証も必ず実施してください。これはセキュリティとデータの整合性を保つ上で非常に重要です。

HTML submitボタンでフォームを送信する


1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>HTML Submit Button Example</title>
6</head>
7<body>
8    <!-- ユーザーからの入力を受け取り、サーバーに送信するためのフォームを定義します。 -->
9    <!-- action属性はデータの送信先URLを指定し、method属性はHTTPメソッド（GETまたはPOST）を指定します。 -->
10    <form action="/submit-data" method="post">
11        <!-- ユーザー名を入力するためのテキストフィールドです。 -->
12        <label for="username">ユーザー名:</label><br>
13        <input type="text" id="username" name="username" required><br><br>
14
15        <!-- type="submit" を持つ input 要素は、フォームのデータを送信するためのボタンを作成します。 -->
16        <!-- value属性はボタンに表示されるテキストを設定します。 -->
17        <input type="submit" value="送信する">
18    </form>
19</body>
20</html>

HTMLのsubmitは、Webフォームを通じてユーザーが入力したデータをサーバーへ送信するための重要な機能です。具体的には、<input>要素のtype属性にsubmitを指定することで、フォームの送信ボタンを作成します。

このサンプルコードでは、ユーザーからの入力を受け取り、サーバーに送信する一連の流れが示されています。まず、<form>タグでフォーム全体を定義し、action="/submit-data"でデータの送信先URLを、method="post"で送信方法（HTTPメソッド）を指定しています。通常、個人情報など秘匿性の高いデータはpostメソッドで送信されます。

<label>と<input type="text">は、ユーザーが「ユーザー名」を入力するためのテキストフィールドを生成します。入力されたデータは、<input>要素のname属性（ここではusername）によって識別されます。

そして、<input type="submit" value="送信する">が、このフォームの肝となる送信ボタンです。type="submit"を指定することで、ユーザーがこのボタンをクリックすると、<form>タグ内に存在する全ての入力データが、action属性で指定されたURLへmethod属性で指定された方法で送信されます。value="送信する"は、ボタンに表示されるテキストを「送信する」に設定しています。

submit自体は特定の引数や戻り値を持つ機能ではなく、<input>要素のtype属性の値として、フォームデータの送信という挙動をトリガーする役割を担っています。これにより、Webアプリケーションとユーザー間のインタラクションが成立します。

type="submit"は、必ず<form>タグ内で使用し、フォームのデータを指定されたサーバーへ送信する役割を持ちます。フォームを送信するには、<form>タグのaction属性で送信先のURLを、method属性で送信方法（通常はpost）を正しく設定することが不可欠です。これらの設定が不適切だと、データは意図した場所に届きません。ボタンを押してデータが送信された後も、実際にそのデータを受け取って処理するサーバー側のプログラムが必要になります。value属性はボタンに表示されるテキストを決めるため、ユーザーに分かりやすい言葉を設定しましょう。また、フォームから送信されたデータは、セキュリティのためサーバー側で必ず検証し、無害化（サニタイズ）する処理を行うように注意してください。