<INPUT type="image">画像で送信ボタンを作る

<FORM>の送信ボタンを作る時は、通常<INPUT type="submit">を使いますが、<INPUT>タグのtype属性の値にimageを指定すると、画像の送信ボタンを作ることができます。

このボタンはフォームに入力された内容と一緒に、画像のクリックされた位置(座標)も送信されてきます。

また画像を送信ボタンとして使用する場合は、画像に対応していないブラウザを使用している場合に備えて、必ずalt属性に代替テキストを入力して下さい。 ここで指定したテキストは画像が表示されない場合のみに、表示されます。 ただし古いブラウザの場合は、代替テキストとしてvalue属性やname属性の値を使用するものもあるようです。

align属性では、通常の画像の時と同じように表示位置を設定することができます。 テキストの回り込みを指定する場合は<BR clear="">で解除することが可能です。

ですが、align属性clear属性は非推奨とされています。 さらにHTML5では廃止されていますので、これらの設定をしたい場合はできる限りスタイルシートを用いるようにして下さい。

使用した時の例

<form action="/cgi-bin/sample.cgi" method="post">
<p>
<input type="image" src="sample.png" alt="送信">
</p>
</form>

ブラウザ上の表示例

書式

  • <input type="image" src="url" name="名前" alt="代替テキスト" align="位置"> ・・・・・・ 画像ボタンを作る

※値について詳しくは下記属性を参照下さい

属性

src="url" ボタンとして使用する画像のurl
name="" 任意のボタン名を指定。画像をクリックしてフォームの内容が送信される時、このボタン名とクリックされた座標(x,y)がセットで送られてくる
width="" 画像の幅をピクセル数、または%で指定
height="" 画像の高さをピクセル数、または%で指定
border="" 画像の枠の太さ
alt="" 画像が表示されなかった場合の代わりとなる、代替テキストの指定
align="" テキストやボタンの位置
  • top・・・テキストをボタンの上揃えにする
  • middle・・・テキストをボタンの中央揃えする
  • bottom・・・テキストをボタンの下揃えにする(初期値)
  • left・・・ボタンを左に配置し、右側に文字を回り込ませる
  • right・・・ボタンを右に配置し、左側に文字を回り込ませる

対応ブラウザなどのデータ

形式 <input type="> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~