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="50"></p>
<p><input type="image" src="button.gif" alt="送信する"></p>
</form>
表示例
※サンプルのため送信できません。
■複数の送信ボタンを使用した例
<form method="post" action="example.cgi">
<p><input type="text" name="example" size="50"></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="50"></p>
<p><input type="image" src="button.gif" alt="送信する" disabled></p>
</form>
表示例
※サンプルのため送信できません。
- サイト内検索
