<input type="image">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

input要素に type="image" を指定すると、画像を使った送信ボタンを作成することができます。


<input type="image" src="button.gif" alt="送信する">

<input type="image" src="button.gif" alt="送信する" align="middle">
属性 値 説明
type="" image 画像を使用した送信ボタンを作成
src="" URI ボタンに使用する画像のURIを指定
name="" 文字列 部品の名前を指定
alt="" テキスト 画像の代わりになるテキストを指定
align="" top、middle、bottom、
left、right		 画像に並ぶテキストの位置を指定 （非推奨属性）

type="image" （画像を使用した送信ボタンを作成）

type属性の値に image を指定すると、画像を使用した送信ボタンを作成できます。

src="" （ボタンに使用する画像のURIを指定）

ボタンに使用する画像を指定します。

name="" （部品の名前を指定）

フォーム部品を識別するための名前を指定します。

この属性の値は、座標値とセットで送信されることになります。（座標については、以下の座標の送信をご覧ください。）

alt="" （画像の代わりになるテキストを指定）

画像の代替テキストを指定します。詳しくは、画像の代わりになるテキストを指定するをご覧ください。

input要素のalt属性は任意となりますが、出来るだけ指定しておくようにしましょう。

align="" （画像に並ぶテキストの位置を指定）

画像に並ぶテキストの位置を指定します。また、画像をフロートさせることもできます。

詳しくは、画像に並ぶテキストの位置を指定するをご覧ください。

  • このalign属性は、HTML 4.01では非推奨とされています。（Strict DTDでは使用できません）

送信ボタンが複数ある場合

状況によっては、複数の送信ボタンを使用する場合があります。（押されたボタンにより処理を振分ける場合など）

そのような場合には、各送信ボタンに name="" を追加して、それぞれの部品名を指定しておきます。

<input type="image" src="button.gif" name="button1" alt="送信する">

座標の送信

画像を使用した送信ボタンをクリックすると、クリックした位置（画像内の座標）が送信されることになります。

送信時の形式は次のようになります。

x=25&y=10

部品名を指定している場合は、次のような形式で送信されます。

（部品名が button1 の場合の例）
button1.x=25&button1.y=10

例）次のボタン画像をクリックすると、ブラウザのアドレスバー（URLの末尾）に座標が表示されます。

その他の属性

以下の属性で、部品の無効化を指定することができます。（主に、JavaScript等と組み合わせて使用することになります）

属性 値 説明
disabled 値は不要 部品を無効化する

disabled （部品を無効化する）

この属性が指定されたボタンは、クリックすることができなくなります。

使用例


<form method="post" action="example.cgi">

<p><input type="text" name="example" size="30"></p>

<p><input type="image" src="button.gif" alt="送信する"></p>

</form>
表示例

  • サンプルのため送信できません。
複数の送信ボタンを使用した例

<form method="post" action="example.cgi">

<p><input type="text" name="example" size="30"></p>

<p>
<input type="image" src="b01.gif" name="button1" alt="Aボタン">
<input type="image" src="b02.gif" name="button2" alt="Bボタン">
<input type="image" src="b03.gif" name="button3" alt="Cボタン">
</p>

</form>
表示例

  • サンプルのため送信できません。
ボタンを無効化した例

<form method="post" action="example.cgi">

<p><input type="text" name="example" size="30"></p>

<p><input type="image" src="button.gif" alt="送信する" disabled></p>

</form>
表示例

  • サンプルのため送信できません。