イメージボタン

イメージボタンは文字列の代わりに画像が表示されるボタンです。イメージボタンはsubmitボタンと同じでボタンがクリックされたタイミングでフォームに入力されたデータが送信されます。イメージボタンを使うにはtype要素には「image」を指定して下さい。

HTML4.01

<input type="image" name="名前" src="画像URI" alt="代替テキスト">

XHTML

<input type="image" name="名前" src="画像URI" alt="代替テキスト" />

※以降はXHTMLの場合で記載します。

name属性には部品に対する名前を指定します。

src属性にはボタンに表示する画像ファイルのURIを指定します。またalt属性には画像の代替テキストを記述します。画像が表示されない時に代わりにテキストが表示されます。(img要素と考え方は同じです。「画像の表示」も参照して下さい)。

具体的には次のように記述します。

<form action="#" method="post">
<p>
名前：<input type="text" name="text1" /><br />
住所：<input type="text" name="text2" /><br />
<input type="image" name="button" src="img/btn.png" alt="送信ボタン" />
</p>
</form>

実際にWebページに配置すると次のように表示されます。

上記の画像をクリックするとフォームの内容が送信されます。

また画像の読み込みに失敗した場合は次のようにalt属性に指定した値が表示されます。