<input type="submit">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

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


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

属性
任意属性(共通)
type="" 部品のタイプ submit 送信ボタン
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 ボタンに表示されるテキスト
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
任意属性(form要素の設定を上書き)
formaction="" [+]送信先の指定 form要素のaction属性の設定を上書き
formmethod="" [+]HTTPメソッド form要素のmethod属性の設定を上書き
formenctype="" [+]送信時のデータ形式 form要素のenctype属性の設定を上書き
formtarget="" [+]送信結果の表示方法 form要素のtarget属性の設定を上書き
formnovalidate [+]妥当性をチェックしない form要素のnovalidate属性の代わりに使用 (値は省略可能)

type属性name属性value属性disabled属性form属性autofocus属性の詳細については、input要素のページを参考にしてください。

このタイプの特徴

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

(実際の表示例)

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

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

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

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

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

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

<input type="submit" name="submit1" value="送信する1">
<input type="submit" name="submit2" value="送信する2">

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>

表示例

  • クリックしたボタンの部品名と値(value属性値)が送信されることになります。これにより、プログラム側にて処理の振分けが行えるようになります。
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>

表示例

お名前: 必須

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