<input type="image">

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

型別為 image 的 <input> 元素用於建立圖形化的提交按鈕，即外觀是影像而不是文字的提交按鈕。

試一試

<p>Sign in to your account:</p>

<div>
  <label for="userId">User ID</label>
  <input type="text" id="userId" name="userId" />
</div>

<input
  type="image"
  id="image"
  alt="Login"
  src="/shared-assets/images/examples/login-button.png" />

label {
  font-size: 0.8rem;
}

label,
input[type="image"] {
  margin-top: 1rem;
}

input[type="image"] {
  width: 80px;
}

值

<input type="image"> 元素不接受 value 屬性。要顯示的影像的路徑在 src 屬性中指定。

附加屬性

除了所有 <input> 元素共有的屬性之外，image 按鈕輸入還支援以下屬性。

alt

alt 屬性提供了一個備用字串，用於在影像無法顯示時（由於錯誤、使用者代理無法或被配置為不顯示影像，或者使用者正在使用螢幕閱讀裝置）作為按鈕的標籤。如果提供該屬性，它必須是一個非空字串，適合作為按鈕的標籤。

例如，如果你有一個圖形按鈕，顯示一個帶有圖示和/或影像文字“立即登入”的影像，你也應該將 alt 屬性設定為類似 立即登入 的內容。

備註： 雖然 alt 屬性在技術上是可選的，但為了最大化你內容的可用性，你應該總是包含它。

在功能上，<input type="image"> 元素的 alt 屬性與 <img> 元素上的 alt 屬性作用相同。

formaction

一個字串，指示提交資料要傳送到的 URL。這會覆蓋擁有該 <input> 元素的 <form> 元素上的 action 屬性。

此屬性也適用於 <input type="submit"> 和 <button> 元素。

formenctype

一個字串，用於標識向伺服器提交表單資料時使用的編碼方法。有三個允許的值：

application/x-www-form-urlencoded: 這是預設值，它在使用類似 encodeURI() 的演算法對文字進行百分號編碼後，將表單資料作為字串傳送。
multipart/form-data: 使用 FormData API 來管理資料，允許將檔案提交到伺服器。如果你的表單包含任何type 為 file 的 <input> 元素（<input type="file">），你必須使用此編碼型別。
text/plain: 純文字；主要只用於除錯，以便你可以輕鬆地看到將要提交的資料。

如果指定，formenctype 屬性的值將覆蓋所屬表單的 action 屬性。

此屬性也適用於 <input type="submit"> 和 <button> 元素。

formmethod

一個字串，指示提交表單資料時使用的 HTTP 方法；該值會覆蓋所屬表單上給定的任何 method 屬性。允許的值為：

get: 透過以 formaction 或 action 屬性給定的 URL 開始，追加一個問號（“?”）字元，然後追加由 formenctype 或表單的 enctype 屬性描述的編碼後的表單資料，來構建一個 URL。然後，使用 HTTP get 請求將此 URL 傳送到伺服器。此方法適用於只包含 ASCII 字元且沒有副作用的表單。這是預設值。
post: 表單的資料包含在請求體中，使用 HTTP post 請求傳送到由 formaction 或 action 屬性給定的 URL。此方法支援複雜資料和檔案附件。
dialog: 此方法用於指示該按鈕關閉與該輸入關聯的對話方塊，並且根本不傳輸表單資料。

此屬性也適用於 <input type="submit"> 和 <button> 元素。

formnovalidate

一個布林屬性，如果存在，則指定在提交到伺服器之前不應驗證表單。這會覆蓋元素所屬表單上 novalidate 屬性的值。

此屬性也適用於 <input type="submit"> 和 <button> 元素。

formtarget

一個字串，指定一個名稱或關鍵字，指示在何處顯示提交表單後收到的響應。該字串必須是瀏覽上下文（即標籤頁、視窗或 <iframe>）的名稱。此處指定的值將覆蓋擁有此輸入的 <form> 上的任何 target 屬性給定的目標。

除標籤頁、視窗或內聯框架的實際名稱外，還可以使用一些特殊的關鍵字：

_self: 將響應載入到包含表單的同一瀏覽上下文中。這將用收到的資料替換當前文件。如果未指定，則這是預設值。
_blank: 將響應載入到一個新的、未命名的瀏覽上下文中。這通常是當前文件所在視窗中的一個新標籤頁，但可能會根據使用者代理的配置而有所不同。
_parent: 將響應載入到當前瀏覽上下文的父級瀏覽上下文中。如果沒有父級上下文，此行為與 _self 相同。
_top: 將響應載入到頂層瀏覽上下文中；這是當前上下文最頂層的祖先瀏覽上下文。如果當前上下文就是頂層上下文，則此行為與 _self 相同。

此屬性也適用於 <input type="submit"> 和 <button> 元素。

height

一個數字，指定繪製 src 屬性所指定影像的高度，單位為 CSS 畫素。

src

一個字串，指定用於表示圖形化提交按鈕的影像檔案的 URL。當用戶與影像互動時，該輸入的處理方式與任何其他按鈕輸入相同。

width

一個數字，指示繪製圖像的寬度，單位為 CSS 畫素。

已廢棄的屬性

以下屬性由 HTML 4 為 image 輸入定義，但並未被所有瀏覽器實現，現已棄用。

usemap

如果指定了 usemap，它必須是影像對映元素 <map> 的名稱，該元素定義了要與影像一起使用的影像對映。此用法已過時；當你想要使用影像對映時，應轉而使用 <img> 元素。

使用影像輸入

<input type="image"> 元素是一個可替換元素（其內容不是由 CSS 層生成或直接管理的元素），其行為與常規的 <img> 元素非常相似，但具有提交按鈕的功能。

影像輸入的基本特性

讓我們看一個包含所有你需要使用的基本特性的基本示例（這些特性與在 <img> 元素上的作用完全相同）。

html

<input
  id="image"
  type="image"
  width="100"
  height="30"
  alt="Login"
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />

src 屬性用於指定你想要在按鈕中顯示的影像的路徑。
alt 屬性為影像提供替代文字，以便螢幕閱讀器使用者可以更好地瞭解按鈕的用途。如果影像因任何原因無法顯示（例如路徑拼寫錯誤），它也會顯示。如果可能，請使用與你使用標準提交按鈕時會使用的標籤相匹配的文字。
width 和 height 屬性用於指定影像應顯示的寬度和高度，單位為畫素。按鈕的大小與影像相同；如果你需要按鈕的點選區域大於影像，你需要使用 CSS（例如 padding）。此外，如果你只指定一個維度，另一個維度會自動調整，以使影像保持其原始的縱橫比。

覆蓋預設的表單行為

<input type="image"> 元素——就像常規的提交按鈕一樣——可以接受多個覆蓋預設表單行為的屬性：

formaction

處理輸入元素提交的資訊的程式的 URI；會覆蓋元素所屬表單的 action 屬性。

formenctype

指定用於向伺服器提交表單的內容型別。可能的值有：

application/x-www-form-urlencoded：如果未指定該屬性，則為預設值。
text/plain.

如果指定了此屬性，它會覆蓋元素所屬表單的 enctype 屬性。

formmethod

指定瀏覽器用於提交表單的 HTTP 方法。可能的值有：

post：表單中的資料包含在表單的主體中，併發送到伺服器。
get：表單中的資料附加到 form 屬性的 URI 之後，用“?”作為分隔符，然後將結果 URI 傳送到伺服器。當表單沒有副作用且僅包含 ASCII 字元時，請使用此方法。

如果指定，此屬性會覆蓋元素所屬表單的 method 屬性。

formnovalidate

一個布林屬性，指定在提交表單時不進行驗證。如果指定了此屬性，它會覆蓋元素所屬表單的 novalidate 屬性。

formtarget

一個名稱或關鍵字，指示在何處顯示提交表單後收到的響應。這是一個瀏覽上下文（例如，標籤頁、視窗或內聯框架）的名稱或關鍵字。如果指定了此屬性，它會覆蓋元素所屬表單的 target 屬性。以下關鍵字具有特殊含義：

_self：將響應載入到與當前相同的瀏覽上下文中。如果未指定該屬性，則此值為預設值。
_blank：將響應載入到一個新的未命名瀏覽上下文中。
_parent：將響應載入到當前瀏覽上下文的父級瀏覽上下文中。如果沒有父級，此選項的行為與 _self 相同。
_top：將響應載入到頂層瀏覽上下文中（即，作為當前上下文祖先且沒有父級的瀏覽上下文）。如果沒有父級，此選項的行為與 _self 相同。

使用 x 和 y 資料點

當你使用 <input type="image"> 建立的按鈕提交表單時，瀏覽器會自動向伺服器提交兩個額外的資料點——x 和 y。你可以在我們的 X Y 座標示例中看到這一點。

當你點選影像提交表單時，你會看到資料作為引數附加到 URL 上，例如 ?x=52&y=55。如果影像輸入有一個 name 屬性，那麼請記住，指定的名稱會作為每個屬性的字首，所以如果 name 是 position，那麼返回的座標在 URL 中的格式將是 ?position.x=52&position.y=55。當然，這也適用於所有其他屬性。

這些是滑鼠點選提交表單時影像上的 X 和 Y 座標，其中 (0,0) 是影像的左上角，也是在沒有點選影像而提交時的預設值。當點選影像的位置很重要時，可以使用這些座標，例如你可能有一張地圖，當被點選時，會將點選的座標傳送到伺服器。然後伺服器端的程式碼會計算出點選了哪個位置，並返回附近地點的資訊。

在我們上面的例子中，我們可以編寫伺服器端程式碼，透過提交的座標來確定點選了哪種顏色，並統計人們投票選出的最喜歡的顏色。

調整影像的位置和縮放演算法

你可以使用 object-position 屬性來調整影像在 <input> 元素框架內的定位，並使用 object-fit 屬性來控制影像的尺寸如何調整以適應框架。這允許你使用 width 和 height 屬性為影像指定一個框架來在佈局中預留空間，然後調整影像在該空間內的位置以及它如何（或是否）被縮放以佔據該空間。

示例

登入表單

以下示例展示了與之前相同的按鈕，但包含在一個典型的登入表單的上下文中。

HTML

html

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  </div>
</form>

CSS

現在來一些 CSS，讓基本元素排列得更整齊：

css

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

調整影像位置和縮放

在此示例中，我們修改了前面的示例，為影像預留更多空間，然後使用 object-fit 和 object-position 調整實際影像的大小和位置。

HTML

html

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="200"
      height="100" />
  </div>
</form>

CSS

css

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #dddddd;
}

在這裡，object-position 被配置為將影像繪製在元素的右上角，而 object-fit 設定為 contain，這表示影像應以不改變其縱橫比的情況下能適應元素框的最大尺寸進行繪製。注意，未被影像覆蓋的區域中仍然可以看到元素可見的灰色背景。

技術摘要

值	無 — 不應指定 `value` 屬性。
事件	無。
支援的常見屬性	`alt`、`src`、`width`、`height`、`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`
IDL 屬性	無。
DOM 介面	`HTMLInputElement`
方法	無。
隱式 ARIA 角色	`button`

規範

規範
HTML # image-button-state-(type=image)

瀏覽器相容性

另見

<input> 及其實現的 HTMLInputElement 介面。
HTML <img> 元素
在 <input> 元素框架內定位和調整影像大小：object-position 和 object-fit

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025⁩年⁧8⁩月⁧13⁩日，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題