<input type="image">
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
input要素に type="image" を指定すると、画像を使った送信ボタンを作成できます。
<input type="image" src="button.gif" alt="送信する">
<input type="image" src="button.gif" alt="送信する" width="80" height="30">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
画像の指定 | URL | 埋め込む画像のURL |
alt="" |
代替テキスト | テキスト | 画像の代わりになるテキスト |
| 任意属性（共通） | |||
type="" |
部品のタイプ | image |
画像形式の送信ボタン |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
disabled |
部品の無効化 | （disabled） |
値は省略可能 |
form="" |
 フォームとの関連付け |
ID名 | 関連付けるform要素に指定したID名 |
autofocus |
自動フォーカスの指定 |
（autofocus） |
値は省略可能、1つの文書に1つだけ指定可能 |
| 任意属性 | |||
width="" |
画像の幅 |
数値 | ピクセル数 |
height="" |
画像の高さ |
数値 | ピクセル数 |
| 任意属性（form要素の設定を上書き） | |||
formaction="" |
送信先の指定 |
form要素のaction属性の設定を上書き | |
formmethod="" |
HTTPメソッド |
form要素のmethod属性の設定を上書き | |
formenctype="" |
送信時のデータ形式 |
form要素のenctype属性の設定を上書き | |
formtarget="" |
送信結果の表示方法 |
form要素のtarget属性の設定を上書き | |
formnovalidate |
妥当性をチェックしない |
form要素のnovalidate属性の代わりに使用 （値は省略可能） | |
- このタイプのボタンでは、value属性は省略しなければなりません。
type属性、name属性、disabled属性、form属性、autofocus属性の詳細については、input要素のページを参考にしてください。
このタイプの特徴
画像を使用した送信ボタンです。
（実際の表示例）
ボタンに使用する画像は、src属性で指定します。また、alt属性が必須となります。
<input type="image" src="button.gif" alt="送信する">
複数の送信ボタンがある場合
フォームの仕様によっては、複数の送信ボタンを使用する場合があります。（クリックされたボタンにより処理を振分ける場合など）
そのような場合には、各送信ボタンにname属性を追加して、それぞれの部品名を指定しておきます。
<input type="image" src="button1.gif" alt="送信する1" name="submit1">
<input type="image" src="button2.gif" alt="送信する2" name="submit2">
座標の送信
このタイプの送信ボタンをクリックすると、クリックした位置（画像内の座標）が送信されることになります。
送信時の形式は次のようになります。（
と25
の部分は、クリックした位置により変化します）10
x=25&y=10
部品名を指定している場合は、次のような形式で送信されます。（
の部分が部品名になります）submit1
submit1.x=25&submit1.y=10
例） 次の送信ボタンをクリックすると、ブラウザのアドレスバー（URLの末尾）に座標が表示されます。
- キーボードの操作で送信した場合は、
x=0&y=0が送信されることになります。
alt属性について
alt属性は、画像の代わりになるテキストを指定します。このテキストは、画像を表示できない環境で使用されることになります。
例えば、画像に投稿すると書かれている場合は、そのテキストをそのまま記述しておきます。
<input type="image" src="button.gif" alt="投稿する">
width属性とheight属性について
width属性とheight属性は、画像の表示サイズをピクセル数で指定します。
次の例では、80×30pxの画像を埋め込んでいます。（画像の実際のサイズをそのまま指定しています）
<input type="image" src="button.gif" alt="送信する" width="80" height="30">
form要素の設定を上書きする属性
formaction属性、formmethod属性、formenctype属性、formtarget属性、formnovalidate属性は、form要素の設定内容を上書きします。
- これらの属性は、複数の送信ボタンを配置して処理を振分ける場合などに使用します。
- formaction属性
form要素のaction属性の設定を上書きします。次の例では、
が優先されることになります。example2.cgi<form method="post" action="example1.cgi"> <input type="image" src="button.gif" alt="送信する" formaction="example2.cgi"> </form>- formmethod属性
form要素のmethod属性の設定を上書きします。次の例では、
が優先されることになります。get<form method="post" action="example.cgi"> <input type="image" src="button.gif" alt="送信する" formmethod="get"> </form>- formenctype属性
form要素のenctype属性の設定を上書きします。次の例では、
が優先されることになります。application/x-www-form-urlencoded<form method="post" action="example.cgi" enctype="multipart/form-data"> <input type="image" src="button.gif" alt="送信する" formenctype="application/x-www-form-urlencoded"> </form>- formtarget属性
form要素のtarget属性の設定を上書きします。次の例では、
が優先されることになります。_self<form method="post" action="example.cgi" target="_top"> <input type="image" src="button.gif" alt="送信する" formtarget="_self"> </form>- formnovalidate属性
妥当性のチェックを行わないことを指定します（form要素のnovalidate属性の代わりに使用します）。次の例では、妥当性のチェックが行われないことになります。
<form method="post" action="example.cgi"> <input type="image" src="button.gif" alt="送信する" formnovalidate> </form>
使用例
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。
<form method="get" action="input_image.html">
<p><input type="image" src="button.gif" alt="送信する" width="86" height="24"></p>
</form>
- 表示例
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。
<form method="get" action="input_image.html">
<p>
<input type="image" src="button1.gif" alt="送信1" name="submit1">
<input type="image" src="button2.gif" alt="送信2" name="submit2">
<input type="image" src="button3.gif" alt="送信3" name="submit3">
</p>
</form>
- 表示例
- クリックしたボタンの部品名と値（座標値）が送信されることになります。これにより、プログラム側にて処理の振分けが行えるようになります。
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。
<form method="get" action="input_image.html">
<p>お名前：<input type="text" name="name" required> <strong>必須</strong></p>
<p>
<input type="image" src="button4.gif" alt="妥当性をチェックする" name="submit1">
<input type="image" src="button5.gif" alt="妥当性をチェックしない" name="submit2" formnovalidate>
</p>
</form>
- 表示例
- デフォルトのままでは妥当性のチェックが行われますが、この属性が指定されたボタンの場合はそのチェックが行われません。（対応しているブラウザのみ）