<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="送信する" 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">

座標の送信

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

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

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>

使用例

width属性とheight属性を指定した例
  • 動作確認のため、送信先として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>

表示例

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

表示例

お名前: 必須

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