cman.jpWEBページ作成
広告
<input type="submit"> 「送信ボタン」
<input type="submit">は、サーバに<form>～</form>の間にある<input>の入力部品内容を送信するために使用するボタンです。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input type="submit">の属性
【構文】
ページTOP
<input type="submit" name="bt01" value="送信" ・・・>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| name="固有名" | 入力に付ける固有名 | "text1" |
| value="値" | サーバに送信する値 | "A" |
| disabled | 入力の無効化 | "disabled" |
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" |
| autofocus | フォーカス（カーソル）を設定 ※HTML5で追加 | "autofocus" |
| formaction="URI" | 送信するURI指定 <form>のactionを上書き ※HTML5で追加 | "sample.cgi" |
| formmethod="get","post" | 送信時のHTTPプロトコル <form>のmethodを上書き ※HTML5で追加 | "get" or "post" |
| formenctype="値" | 送信時のエンコーディング方法 <form>のmethodを上書き ※HTML5で追加 | methodを参照 |
| formtarget="値" | フォーム送信後のページ表示方法 <form>のtargetを上書き ※HTML5で追加 | targetを参照 |
| formnovalidate | 入力の妥当性チェックを行わない ※HTML5で追加 | "formnovalidate" |
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="submit">のサンプル
<input type="submit" name="bt01">
valueを指定しない場合はブラウザによって表示が異なります。画面イメージを確認
| IE11 | Chrome32 | Firefox27 | Safari5.1 |
|---|---|---|---|
 |  |  |  |
入力の無効化【disabled】
<input type="submit" name="bt01" value="送信する" disabled>
ブラウザによって表示が異なります。画面イメージを確認
| IE11 | Chrome32 | Firefox27 | Safari5.1 |
|---|---|---|---|
 |  |  |  |
フォーカスの初期設定【autofocus】
<input type="submit" name="bt01" value="送信する" autofocus>
ブラウザによって表示が異なります。画面イメージを確認
| IE11 | Chrome32 | Firefox27 | Safari5.1 |
|---|---|---|---|
 |  |  |  |
form属性の上書き【formaction,formmethod,formenctype,formtarget】
<form action="test01.cgi" method="get" enctype="text/plain"target="_blank">
<input type="submit" name="ck01" value="送信">
<input type="submit" name="ck02" value="test02送信" formaction="test02.cgi">
<input type="submit" name="ck03" value="post送信" formmethod="post">
</form>
<input type="submit" name="ck01" value="送信">
<input type="submit" name="ck02" value="test02送信" formaction="test02.cgi">
<input type="submit" name="ck03" value="post送信" formmethod="post">
</form>
SUBMIT先の変更やPOST/GETを変更することができます。
※非対応のブラウザもあるので注意が必要です。
入力チェックの有無【formnovalidate】
<form>
氏名： <input type="text" name="in01" size="15" maxlength="20" required>
<input type="submit" name="bt01" value="チェックあり" >
<input type="submit" name="bt02" value="チェックなし" formnovalidate>
</form>
氏名： <input type="text" name="in01" size="15" maxlength="20" required>
<input type="submit" name="bt01" value="チェックあり" >
<input type="submit" name="bt02" value="チェックなし" formnovalidate>
</form>
requiredやpatternのチェックを無効にすることが来出ます。
※非対応のブラウザもあるので注意が必要です。
チェックエラー時のサンプルは <input type="text"> を参照ください。
<input type="submit">のスタイルシートサンプル
<style type="text/css">
<!--
.chk1 {border: 3px outset #0000cc;background-color:#99ffff;}
.chk2 {border: 3px outset #cc0000;background-color:#ffffcc;}
-->
</style>
< input type="submit" name="bt01" value="実行1" class="chk1" id="chkid1">
< input type="submit" name="bt02" value="実行2" class="chk2" id="chkid2">
<!--
.chk1 {border: 3px outset #0000cc;background-color:#99ffff;}
.chk2 {border: 3px outset #cc0000;background-color:#ffffcc;}
-->
</style>
< input type="submit" name="bt01" value="実行1" class="chk1" id="chkid1">
< input type="submit" name="bt02" value="実行2" class="chk2" id="chkid2">
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- ENTERキーが押された場合、submitが自動押下される。
複数のsubmitボタンがある場合、初めに定義されているsubmitボタンが有効となります。
広告