<input type=image> …… 画像ボタンを表す

<input type=image>は、画像ボタンを表す際に使用します。

input要素のtype属性の値に image を指定すると、画像によるフォーム送信ボタンを表します。 Image Button状態のinput要素は、フォーム送信ボタンの役割を果たす画像です。 その画像内の座標をユーザーが選択するとフォーム送信されます。

Image Button状態のinput要素によってフォーム送信される場合、 フォーム送信の際にユーザーが選択した画像内の座標(x, y)を取得できます。 座標は、画像の左上端を (0, 0) とした場合の相対的な位置を表し、x座標は右方向に正、y座標は下方向に正となります。

input type=imageの場合の他の属性

input type=imageの場合、src属性は必須です。 src属性の値には、画像リソースを参照する有効なURLを指定します。 src属性の値に空文字は指定できません。

input type=imageの場合、alt属性は必須です。 alt属性の値には、画像が利用できない場合に使用する置換テキストを指定します。 alt属性の値として適切なテキストは、画像が利用できない場合に画像と同等の役割を果たす、 ボタンに適切なラベルを与える文字列です。 alt属性の値に空文字は指定できません。

input type=imageの場合、width属性とheight属性で 画像がレンダリングされる幅と高さを指定できます

formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性は、 フォーム送信コントロールに使用する属性です。

input type=imageの場合、value属性は省略する必要があります。

■属性

■使用例

以下のサンプルは、input要素のtype属性の値に image を指定して画像ボタンを作成しています。 例えば、ユーザーが画像の中心をクリックした場合、 送信先URLには「?where.x=150&where.y=50」という具合に選択した座標が付加されます。 ユーザーが画像のどの位置をクリックしたかによって、送信結果を振り分けることもできるでしょう。

<form action="#sample1" id="sample1">
 <input type=image src=./sample/where.png name=where alt="画像のどこを選択したか？">
</form>

Sponsors