<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属性の指定は特に必要ありません。

座標の送信

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

送信時の形式は次のようになります。(2510 の部分は、クリックした位置により変化します)

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ファイル(現在のページ)を指定しています。
  • 送信後のアドレスバーにて、クリックした位置の座標を確認することができます。
width属性とheight属性を指定した例

<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>

表示例

  • クリックしたボタンの部品名と値(座標値)が送信されることになります。これにより、プログラム側にて処理の振分けが行えるようになります。
formnovalidate属性を指定した例

<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>

表示例

お名前: 必須

  • デフォルトのままでは妥当性のチェックが行われますが、この属性が指定されたボタンの場合はそのチェックが行われません。(対応しているブラウザのみ)