イメージボタン

イメージボタンは文字列の代わりに画像が表示されるボタンです。イメージボタンは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ページに配置すると次のように表示されます。

p5-1

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

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

p5-2

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。