Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。
<input type="image"> 要素は value 属性を受け付けません。表示する画像へのパスを src 属性で指定します。
すべての <input> 型で共通する属性に加え、 image 型の入力欄は次の属性にも対応しています。
alt 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します（エラーの場合、ユーザーエージェントが画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など）。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。
例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 alt 属性も 今すぐログイン のように設定してください。
メモ: alt 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。
<input type="image"> 要素の alt 属性は、機能的には <img> 要素における alt 属性と同様に動作します。
文字列で、データの送信先の URL を示します。これはこの <input> が属する <form> 要素の action 属性より優先します。
この属性は <input type="submit"> および <button> 要素でも使用できます。
文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は 3 つです。
application/x-www-form-urlencodedこれは既定値で、フォームのデータを encodeURI() などのアルゴリズムを使ってテキストをパーセントエンコーディングした後のテキストとして送信します。
multipart/form-dataデータを管理するために FormData API を使用し、複数のファイルをサーバーに送信することができます。フォームに <input> 要素の type が file のもの (<input type="file">) が含まれている場合は、このエンコーディング型を使わなければなりません。
text/plainプレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。
formenctype 属性が指定された場合、所属するフォームの action 属性を上書きします。
この属性は <input type="submit"> および <button> 要素でも使用できます。
文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの method を上書きします。許されている値は次の通りです。
getURL は formaction または action 属性で与えられた URL で始まり、クエスチョンマーク ("?") 文字を付加し、次に formenctype またはフォームの enctype 属性の記述に従ってコード化したフォームデータを付加して作成されます。この URL は、 HTTP の GET リクエストでサーバーに送信されます。この方法は、 ASCII 文字のみを含み、副作用のないフォームに対してよく機能します。これは既定値です。
postフォームのデータは formaction または action 属性で指定された URL に HTTP の POST リクエストで送信される本文に含まれます。このメソッドは、複雑なデータやファイルの添付に対応しています。
dialogこのメソッドは、ボタンが入力に関連するダイアログを閉じ、フォームデータを全く送信しないことを示すために使用される。
この属性は <input type="submit"> および <button> 要素でも使用できます。
論理属性で、これがある場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、その要素の所有するフォームの novalidate 属性の値より優先されます。
この属性は <input type="submit"> および <button> 要素でも使用できます。
文字列で、フォームを送信した後に受け取ったレスポンスを表示する場所を示す、名前またはキーワードを指定します。この文字列は、閲覧コンテキスト（つまり、タブ、ウィンドウ、または <iframe>）の名前である必要があります。ここで指定された値は、この入力を所有する <form> の target 属性で指定されたターゲットよりも優先されます。
タブ、ウィンドウ、インライン枠などの実際の名前のほかに、いくつかの特別なキーワードを使用することができます。
_selfレスポンスを、フォームを含むものと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換えられます。これは、何も指定されていない場合に使用される既定値です。
_blankレスポンスを新しい、名前のない閲覧コンテキストに読み込みます。これは通常、現在の文書と同じウィンドウの新しいタブですが、ユーザーエージェントの設定によって異なる場合があります。
_parent現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、 _self と同じ動作をします。
_topこれは現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは _self と同じように動作します。
この属性は <input type="submit"> および <button> 要素でも使用できます。
src 属性で指定された画像を描画する高さを CSS ピクセルで指定した数値です。
文字列で、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定します。ユーザーが画像と対話するとき、その入力は他のボタン入力と同様に処理されます。
画像を描画する幅を CSS ピクセルで表した数値です。
以下の属性は、 HTML 4 で image 入力用に定義されたものですが、すべてのブラウザーで実装されていたわけではなく、その後、非推奨となりました。
usemap が指定された場合、画像と共に使用するイメージマップを定義します。イメージマップ要素 <map> の名前でなければなりません。この使い方は時代遅れです。イメージマップを使いたい場合は、 <img> 要素を使うように切り替えてください。
<input type="image"> 要素は置換要素（CSS レイヤーによって内容が生成されたり、直接管理されたりしない要素）で、大部分は通常の <img> 要素と同じ動きをしますが、送信ボタンの機能を持っています。
必要な機能をすべて含んだ基本的な例を見てみましょう（これらは <img> 要素とまったく同じように動作します）。
<input type="image"> 要素は — 通常の送信ボタンと同様に — 既定のフォームの動作を上書きするいくつかの属性を受け付けます。
formactioninput 要素から送信された情報を処理するプログラムの URI。要素のフォームオーナーの action 属性を上書きします。
formenctypeサーバーにフォームを送信する際に使用するコンテンツの種類を指定します。指定可能な値は以下のとおりです。
この属性が指定された場合、要素のフォームオーナーの enctype 属性を上書きします。
formmethodブラウザーがフォームを送信するために使用する HTTP メソッドを指定します。指定可能な値は以下のとおりです。
指定された場合、この属性は要素のフォームオーナーの method 属性を上書きします。
formnovalidate論理属性で、フォーム送信時に検証を行わないことを指定します。この属性が指定された場合、要素のフォームオーナーの novalidate 属性を上書きします。
formtargetフォームを送信した後に受信したレスポンスを表示する場所を示す名前またはキーワードです。これは、閲覧コンテキスト（例えば、タブ、ウィンドウ、インライン枠）の名前、またはキーワードです。この属性が指定された場合、要素のフォームオーナーの target 属性を上書きします。次のキーワードは特別な意味を持ちます。
<input type="image"> で作成したボタンを使ってフォームを送信すると、ブラウザーが自動的に x と y という 2 つの追加データをサーバーに送信します。 X Y 座標の例で、その様子を見ることができます。
画像をクリックしてフォームを送信すると、 ?x=52&y=55 のようなデータが引数として URL に付加されるのがわかります。画像入力に name 属性がある場合、指定した名前はすべての属性の先頭に付くことに注意してください。したがって、name が position である場合、返される座標は URL で ?position.x=52&position.y=55 という書式となります。もちろん、これは他のすべての属性にも当てはまります。
これらは、マウスでクリックしてフォームを送信した画像の X と Y の座標で、 (0,0) が画像の左上となり、画像のクリック以外で送信が発生した場合の既定値もこれになります。これらは、画像の中でクリックされた位置が重要である場合、例えば、地図がクリックされると、クリックされた座標がサーバーに送信されるような場合に利用することができます。サーバー側のコードは、クリックされた場所を特定し、その近くの場所についての情報を返します。
上記の例では、サーバー側のコードで、送信された座標からどの色がクリックされたかを調べ、人々が投票した好きな色の集計を行うことができます。
object-position プロパティを使用すると、 <input> 要素の枠内での画像の位置を調整することができ、 object-fit プロパティは枠内に収める画像の大きさを調整する方法を制御することができます。これにより、 width と height 属性を用いて画像の枠を指定し、レイアウト内に空間を確保した上で、その空間内のどこに画像を配置し、その空間に合わせて画像を縮小する方法（または縮小するかどうか）を調整することができます。
次の例は、前と同じボタンを、典型的なログインフォームのコンテキストに含めて表示したものです。
次に、基本的な要素をよりきれいに配置するための CSS です。
この例では、前の例を応用して画像のための空間を確保し、 object-fit と object-position で実際の画像の大きさと位置を調整しています。
ここでは、 object-position は画像4を要素の右上隅に描画するように設定され、 object-fit は contain に設定されています。これは、画像の縦横比を変えずに要素のボックス内に収まる最大の大きさで描画することを意味しています。画像で覆われていない領域では、要素の灰色の背景がまだ見えていることに注意してください。
| 値 | なし — value 属性は指定しないでください。 |
| イベント | なし |
| 対応している共通属性 | alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget |
| IDL 属性 | なし |
| DOM インターフェイス | HTMLInputElement |
| メソッド | なし |
| 暗黙の ARIA ロール | button |
| HTML # image-button-state-(type=image) |
Enable JavaScript to view this browser compatibility table.
This page was last modified on 2025年7月22日 by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.