サイト内検索
...HTML・XHTMLタグ...
フォーム
画像を送信ボタンに
- 画像を送信ボタンにするには、input要素にtype="image"を指定します。
- 送信ボタンが複数ある場合
- 押されたボタンにより処理を振分ける場合などのような
- 複数の送信ボタンを使用する場合があります
- このような場合には、それぞれの送信ボタンに name=""を追加して、
- ボタン名を指定します。
- [使い方]
- <input type="image" src="botan.gif" alt="送信" align="right">
| 属性 | 属性値 | 説明 |
|---|---|---|
| type= | "image" | 画像を使用した送信ボタンを作成します。 |
| src= | "" |
「"../sample.png"」のように
ボタンに使用する画像のurlを指定します。。 |
| name= | "" |
部品名を指定します。
半角英数字を指定します。 |
| alt= | "" | 「 "sample画像です"」のように
代わりのテキストを指定します。 |
| 属性 | 属性値 | 説明 |
|---|---|---|
| align= | "top" | 画像横の上部に1行の文字を表示します。 |
| "middle" | 画像横の中央に1行の文字を表示します | |
| "bottom" |
画像横の下部に1行の文字を表示します
(標準値・初期設定値) |
|
| "left" | 画像の右側に複数行の文字を表示します。 | |
| "right" | 画像の左側に複数行の文字を表示します。 |
文字の回りこみを解除するには、 こちらをご覧ください。
サンプル
《ボタン一つの場合》
[ｂｏｄｙの中]
<form method="get" action="sample.cgi"><div class="sample">
<input type="image" src="../img.gif" alt="送信する">
</div>
</form>
[ブラウザ上]
《ボタンが複数ある場合》
[ｂｏｄｙの中]
<form method="get" action="sample.cgi"><div class="sample-1">
<input type="image" src="../img.gif" name="botan1" alt="送信する">
<input type="image" src="../img.gif" name="botan2" alt="送信する">
<input type="image" src="../img.gif" name="botan3" alt="送信する">
</div>
</form>
[ブラウザ上]
