カスタム検索

image(イメージボタン)

<input>の属性にtype="image"を指定すると、画像を使用して好きな形状のイメージボタンを作成することができます。役割としては、送信ボタンと同様で、クリックされると、そのフォームで定義されているフォーム要素の名前と値のセットが、<form>タグのaction属性で指定されているプログラム等に送信されます。

type="image"を指定した場合に使用できる属性は以下のようになります。

イメージボタンの属性
属性 イベント   フォーカス   name   alt   src   disabled   usemap  

name属性

name属性は、<input>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラム等から参照されます。type="image"には、このname属性は必須です。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号なども使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」(アンダーバー)を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグなどで使用されるname属性とは役割が異なるものです。

src属性、alt属性

src属性には、イメージボタンに使用する画像ファイルのパスを記述します。相対パスでも絶対パスでも構いません。イメージボタンにsrc属性は必須です。

alt属性には、画像を表示できないブラウザに対して、代わりに表示されるテキストを記述しておきます。src属性とalt属性は、<img>タグの同名の属性と同じ役割です。

disabled属性

disabled属性を指定すると、イメージボタンを使用不可にします。ブラウザには表示されるが、クリックはできないイメージボタンとなります。

入力例

入力例です。

input_image.html
<html>
    <head>
        <title>&lt;input type="image" /&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <div><input type="image" name="image_button" src="/w-d-l.net/httpdocs/images/example/input_image.gif" /></div>
            <div><input type="image" name="image_button" src="/images/example/input_image.gif" alt="イメージボタン" /></div>
            <div><input type="image" name="image_button" src="/images/example/input_image.gif" disabled="disabled" /></div>
        </form>
    </body>
</html>

usemap属性

イメージボタンにはusemap属性が指定できます。usemap属性については、<img>および、<map>を参照してください。

ただし、イメージボタンは、イメージマップを定義しなくても、クリック(送信)された際に、画像のどの場所がクリックされたかを送信する機能を持っています。

例えば、name属性の値に「image」が指定されていて、イメージボタンの左上から右に10ピクセル、下に5ピクセルの場所がクリックされた場合、image_x=10とimage_y=5も送信されます。

CopyLeft 2024 Webデザインレッスン プライバシーポリシー サイト管理者に連絡