<input type="submit">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

input要素type="submit" を指定すると、フォームの送信ボタンを作成できます。


<input type="submit" value="送信する">

属性
任意属性(共通)
type="" 部品のタイプ submit 送信ボタン
name="" 部品の名前 文字列 部品を識別するための名前
value="" ボタンのテキスト 文字列 ボタンに表示されるテキスト
disabled 部品の無効化 disabled 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性(部品タイプに依存)
dirname="" 書字方向の送信に使う名前 文字列 識別するための名前
popovertarget="" [+]ポップオーバー要素との関連付け ID名 関連付けるポップオーバー要素に指定したID名
popovertargetaction="" [+]ポップオーバー要素の表示状態 toggle ポップオーバー要素を表示または非表示にする(既定値)
show ポップオーバー要素を表示する
hide ポップオーバー要素を非表示にする
任意属性(form要素の設定を上書き)
formaction="" 送信先の指定 form要素のaction属性の設定を上書き
formmethod="" HTTPメソッド form要素のmethod属性の設定を上書き
formenctype="" 送信時のデータ形式 form要素のenctype属性の設定を上書き
formtarget="" 送信結果の表示方法 form要素のtarget属性の設定を上書き
formnovalidate 妥当性をチェックしない form要素のnovalidate属性の代わりに使用(値は省略可能)
  • 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)
  • ポップオーバー要素とは、popover属性が指定された要素のことを言います。

popovertarget属性popovertargetaction属性の詳細については、下記のページを参考にしてください。


どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

フォームを送信するためのボタンです。

(実際の表示例)

ボタンに表示されるテキストは、value属性で指定することができます。

<input type="submit" value="送信する">

value属性を省略した場合は、デフォルトのテキストが使用されることになります。(デフォルトのテキストはブラウザにより異なります)

複数の送信ボタンがある場合

フォームの仕様によっては、複数の送信ボタンを使用する場合があります。(クリックされたボタンにより処理を振分ける場合など)

そのような場合には、各送信ボタンにname属性を追加して、それぞれの部品名を指定しておきます。

<input type="submit" name="submit1" value="送信する1">
<input type="submit" name="submit2" value="送信する2">
  • name属性を指定することで、value属性の値が送信されるようになります。
  • 送信ボタンが1つだけの場合は、name属性の指定は特に必要ありません。

form要素の設定を上書きする属性

formaction属性formmethod属性formenctype属性formtarget属性formnovalidate属性は、form要素の設定内容を上書きします。

  • これらの属性は、複数の送信ボタンを配置して処理を振分ける場合などに使用します。
formaction属性

form要素のaction属性の設定を上書きします。次の例では、example2.cgi が優先されることになります。

<form method="post" action="example1.cgi">

<input type="submit" value="送信する" formaction="example2.cgi">

</form>
formmethod属性

form要素のmethod属性の設定を上書きします。次の例では、get が優先されることになります。

<form method="post" action="example.cgi">

<input type="submit" value="送信する" formmethod="get">

</form>
formenctype属性

form要素のenctype属性の設定を上書きします。次の例では、application/x-www-form-urlencoded が優先されることになります。

<form method="post" action="example.cgi" enctype="multipart/form-data">

<input type="submit" value="送信する" formenctype="application/x-www-form-urlencoded">

</form>
formtarget属性

form要素のtarget属性の設定を上書きします。次の例では、_self が優先されることになります。

<form method="post" action="example.cgi" target="_top">

<input type="submit" value="送信する" formtarget="_self">

</form>
formnovalidate属性

妥当性のチェックを行わないことを指定します(form要素のnovalidate属性の代わりに使用します)。次の例では、妥当性のチェックが行われないことになります。

<form method="post" action="example.cgi">

<input type="submit" value="送信する" formnovalidate>

</form>

使用例

value属性を指定した例

<p><input type="submit"> (デフォルト)</p>
<p><input type="submit" value="送信する"></p>

表示例

(デフォルト)

  • サンプルのため送信できません。
複数の送信ボタンを配置した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。
  • 送信後のアドレスバーにて、クリックされたボタンの部品名を確認することができます。

<form method="get" action="input_submit.html">

<p>
<input type="submit" name="submit1" value="送信ボタン1">
<input type="submit" name="submit2" value="送信ボタン2">
<input type="submit" name="submit3" value="送信ボタン3">
</p>

</form>

表示例

formnovalidate属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_submit.html">

<p>お名前:<input type="text" name="name" required> <strong>必須</strong></p>

<p>
<input type="submit" name="submit1" value="妥当性をチェックする">
<input type="submit" name="submit2" value="妥当性をチェックしない" formnovalidate>
</p>

</form>

表示例

お名前: 必須

  • デフォルトのままでは妥当性のチェックが行われますが、この属性が指定されたボタンの場合はそのチェックが行われません。(対応しているブラウザのみ)