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" | ||||||||
| dirname="固有名" | 文字方向のサーバ送信固有名 ※HTML5以降に追加 | "name01" | ||||||||
| formaction="URI" | 送信するURI指定 <form>のactionを上書き ※HTML5で追加 | "sample.cgi" | ||||||||
| formmethod="get","post","dialog" | 送信時のHTTPプロトコル <form>のmethodを上書き ※HTML5で追加 | "get" or "post" or "dialog" | ||||||||
| formenctype="値" | 送信時のエンコーディング方法 <form>のenctypeを上書き ※HTML5で追加 | enctypeを参照 | ||||||||
| formtarget="値" | フォーム送信後のページ表示方法 <form>のtargetを上書き ※HTML5で追加 | targetを参照 | ||||||||
| formnovalidate | 入力の妥当性チェックを行わない ※HTML5で追加 | "formnovalidate" | ||||||||
| popovertarget | 関連付けするポップオーバー要素を指定 ※HTML5以降に追加 | "id名" ポップオーバー要素のidを指定 | ||||||||
| popovertargetaction="toggle","show","hide" | 関連付けしたポップオーバー要素の切り替え ※HTML5以降に追加 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<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">
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- 特になし
広告