送信ボタンとリセットボタンを作る |
|
<input type="submit"><input type="reset"> |
「汎用ボタン(1)(2)」のページには、 Java Script を使用しています。ブラウザ上部の 情報バーに、
 セキュリティの保護のため、コンピュータにアクセスできるアクティブ コンテンツは.....
を表示した場合は、 こちらのページをご覧下さい。対処方法を掲載しています。 |
|
|
<input>タグに type="submit" を指定すると送信ボタン、type="reset" を指定するとリセットボタンが作成できます。 |
|
<input type="submit" value="送信する">
<input type="reset" value="リセット"> |
type="" |
submit | 送信ボタンを作成 |
reset | リセットボタンを作成 |
value="" |
ボタンに表示する文字を指定 |
name="" |
送信ボタンを複数使用するときに指定 |
|
|
■value="" (ボタンに表示する文字) |
value="" で指定した文字をボタンに表示します。
この指定を行わない場合は、ブラウザごとに次のようなデフォルトの文字を表示します。 |
|
|
【送信ボタン】 |
入力した内容を送信するためのボタンです。 |
|
【リセットボタン】 |
入力した内容をキャンセルして、初期状態に戻すためのボタンです。 |
|
【送信ボタンが複数ある場合】 |
押されたボタンにより処理を振分けるなど、複数の送信ボタンを必要とすることがあります。
このような場合には、各送信ボタンに name="" を追加し、それぞれにボタン名を付けます。 |
 ボタンのサイズや背景色などは、スタイルシートで設定できます。 |
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
☆ 標準(デフォルト)の表示
<form method="POST" action="samp_1.cgi">
<input type="text" name="b-name1"><br>
<input type="submit">
<input type="reset"> </form> |
|
| |
☆ value="" を指定する場合
<form method="POST" action="samp_1.cgi">
<input type="text" name="b-name2"><br>
<input type="submit" value="送信する">
<input type="reset" value="リセットする">
</form> |
|
| |
☆ 送信ボタンが複数ある場合
<form method="POST" action="samp_1.cgi">
<input type="text" name="b-name3"><br>
<input type="submit" value="送信1" name="sub1">
<input type="submit" value="送信2" name="sub2">
<br><input type="reset" value="リセットする">
</form> |
|
|
|
|
関連するページ |
CSS リファレンス :フォーム リファレンス(css)へ |
|
画像で送信ボタンを作る |
<input type="image"> |
「汎用ボタン(1)(2)」のページには、 Java Scriptを使用しています。ブラウザ上部の 情報バーに、
 セキュリティの保護のため、コンピュータにアクセスできるアクティブ コンテンツは.....
を表示した場合は、 こちらのページをご覧下さい。対処方法を掲載しています。 |
|
|
<input>タグに type="image" を指定すると、画像を使った送信ボタンを作成できます。 |
|
<input type="image" src="send.gif" alt="送信">
<input type="image" src="send.gif" alt="送信" align="right"> |
type="" | image を指定 |
src="" | 読み込む画像のファイル名を指定 |
alt="" | 画像の代替えテキストを指定 |
align="" | 画像に並ぶ文字の位置を指定 |
name="" | 送信ボタンを複数使用するときに指定 |
|
|
■src="" (画像のファイル名) |
ボタンに使用する画像のファイル名を指定します。
※ 画像ファイル名の指定は、「パス(URL)の指定方法」のページを参考にして下さい。  |
|
■alt="" (代替えテキスト) |
|
|
■align="" (画像に並ぶ文字の位置) |
画像に並ぶ文字の位置を指定します。
※ 詳細は、<img>タグの「 画像に並ぶ文字」をご覧下さい。 |
 align属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。  |
|
【送信ボタンが複数ある場合】 |
押されたボタンにより処理を振分けるなど、複数の送信ボタンを必要とすることがあります。
このような場合には、各送信ボタンに name="" を追加し、それぞれにボタン名を付けます。 |
|
【座標の送信】 |
<form>タグに method="get" を設定し、画像を使った送信ボタンをクリックすると、クリックした位置(座標)が送信されます。 |
■送信される形式 |
例1 ボタン名を指定しない場合…index.html?x=20&y=15 |
例2 ボタン名を指定した場合…index.html?ボタン名.x=20&ボタン名.y=15 |
右の画像ボタンをクリックすると、ブラウザのアドレスバー内の URL末尾に座標値を送信します。 表示する形式は、「例1」のタイプです。 |
|
|
|
★ 使用例とブラウザでの表示 |
|
|
関連するページ |
HTML タグページ :画像の代替えテキストを指定する
HTML タグページ :画像に並ぶ文字の位置を指定する |
Utilety Page (参考) :「非推奨タグと非推奨属性」へ |
|
汎用的なボタンを作る(1) |
<input type="button"> |
このページは、 Java Script を使用しています。ブラウザ上部の 情報バーに、
 セキュリティの保護のため、コンピュータにアクセスできるアクティブ コンテンツは.....
を表示した場合は、 こちらのページをご覧下さい。対処方法を掲載しています。 |
|
|
<input>タグに type="button" を指定すると、汎用的に使えるボタンを作成できます。 |
|
<input type="button" value="クリック">
<input type="button" value="クリック" onclick="" name=""> |
type="" | button を指定 |
value="" | ボタンに表示する文字を指定 |
onclick="" | ボタンをクリックした時の動作を指定 |
name="" | ボタン名を指定する時に使用 |
|
|
■value="" (ボタンに表示する文字) |
value="" で指定した文字をボタンに表示します。
この指定を行わないと、次のような小さなボタンになります。 → |
この汎用タイプのボタンは、主にJavaScriptなどで使用します。
name="" を追加すると、ボタン名を指定できます。 |
 ボタンのサイズや背景色などは、スタイルシートで設定できます。 |
|
★ 使用例とブラウザでの表示 |
|
※ この使用例は、JavaScriptを使用しています。 アラートを使用する場合は、<meta>タグで「スクリプト言語の指定」を行って下さい。 |
|
関連するページ |
HTML タグページ :スクリプト言語を指定する |
CSS リファレンス :フォーム リファレンス(css)へ |
|
汎用的なボタンを作る(2) |
<button type=""> |
このページは、 Java Script を使用しています。ブラウザ上部の 情報バーに、
 セキュリティの保護のため、コンピュータにアクセスできるアクティブ コンテンツは.....
を表示した場合は、 こちらのページをご覧下さい。対処方法を掲載しています。 |
|
|
<button>タグで、送信ボタンやリセットボタン、汎用ボタンなどを作成できます。 |
|
<button type="button">表示する内容</button>
<button type="submit" name="name" value="ボタン">表示する内容</button> |
* <button>タグで囲んだ部分をボタンに表示します。表示内容にはタグも使用できるので、「文字 の装飾」や「画像の表示」もできます。 |
type="" | button … 汎用ボタンを指定 |
submit … 送信ボタンを指定 |
reset … リセットボタンを指定 |
name="" | ボタン名を指定(半角英数字) |
value="" | 送信する内容を指定 |
|
 ボタンのサイズや背景色などは、スタイルシートで設定できます。 |
|
★ 使用例とブラウザでの表示 |
|
使 用 例 |
|
ブラウザの表示 |
| |
☆ ボタンに表示する文字サイズを変更
<form method="POST" action="samp_3.cgi">
<input type="text" name="s-name1"><br>
<button type="submit"><big>送信</big></button>
<button type="reset"><small>リセット</small></button>
</form> |
|
|
※ 使用例の は、ボタンの間隔を空けるための記述です。 |
| |
☆ ボタンに画像を表示(JavaScriptの組み合わせ)
<button type="button" onClick="alert('テスト表示です。')">
<img src="../acc/for/btnAlert.gif" alt="アラートボタン"
height=40 width=45>アラート
</button> |
|
|
* [アラート]ボタンをクリックして下さい。 |
|
|
※ この使用例は、JavaScriptを使用しています。 アラートを使用する場合は、<meta>タグで「スクリプト言語の指定」を行って下さい。 |
|
関連するページ |
HTML タグページ :スクリプト言語を指定する |
CSS リファレンス :フォーム リファレンス(css)へ |
|