<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属性の代わりに使用（値は省略可能） | |
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>
使用例
<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>
- 表示例
- 動作確認のため、送信先として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>
- 表示例
- デフォルトのままでは妥当性のチェックが行われますが、この属性が指定されたボタンの場合はそのチェックが行われません。（対応しているブラウザのみ）