<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，这表示应以适合元素框内且不更改其纵横比的最大尺寸绘制图像。请注意，元素的可见灰色背景仍然在图像未覆盖的区域可见。