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