<input type="image">

_self

將響應載入到與包含表單的瀏覽上下文相同的上下文中。這將用接收到的資料替換當前文件。如果未指定，則使用此預設值。

_blank

將響應載入到一個新的、未命名的瀏覽上下文中。這通常是與當前文件相同的視窗中的一個新選項卡，但可能會根據使用者代理的配置而有所不同。

_parent

將響應載入到當前瀏覽上下文的父瀏覽上下文中。如果沒有父上下文，則其行為與_self相同。

_top

將響應載入到頂級瀏覽上下文中；這是當前上下文的最高祖先的瀏覽上下文。如果當前上下文是頂級上下文，則其行為與_self相同。

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

<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）。此外，如果您只指定一個維度，則另一個維度會自動調整，以便影像保持其原始縱橫比。

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相同。

當您單擊影像以提交表單時，您將看到資料作為引數附加到URL中，例如?x=52&y=55。如果影像輸入具有name屬性，則請記住，指定的名稱會新增到每個屬性的前面，因此，如果name為position，則返回的座標將在URL中格式化為?position.x=52&position.y=55。當然，這也適用於所有其他屬性。

這些是滑鼠單擊以提交表單的影像的X和Y座標，其中（0,0）是影像的左上角，並且在沒有單擊影像的情況下提交時為預設值。當單擊影像的位置很重要時，可以使用這些座標，例如，您可能有一個地圖，單擊它時，會將單擊的座標傳送到伺服器。然後，伺服器端程式碼計算出單擊了哪個位置，並返回有關附近位置的資訊。

在上面的示例中，我們可以編寫伺服器端程式碼，根據提交的座標計算出單擊了哪個顏色，並統計人們投票選擇的喜歡的顏色。

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使基本元素更整齊地排列。

div {
  margin-bottom: 10px;
}

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

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

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: #ddd;
}

這裡，object-position配置為在元素的右上角繪製圖像，而object-fit設定為contain，這表示應以適合元素框內且不更改其縱橫比的最大尺寸繪製圖像。請注意，元素的可見灰色背景仍然在影像未覆蓋的區域可見。