<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 上查看此页面 • 报告此内容的问题