<input type="image">

¥Value

<input type="image"> 元素不接受 value 属性。要显示的图片的路径在 src 属性中指定。

¥<input type="image"> elements do not accept value attributes. The path to the image to be displayed is specified in the src attribute.

¥Additional attributes

除了所有 <input> 元素共享的属性外，image 按钮输入还支持以下属性。

¥In addition to the attributes shared by all <input> elements, image button inputs support the following attributes.

如果无法显示图片（由于错误、user agent 无法或配置为不显示图片，或者用户正在使用屏幕阅读设备），则 alt 属性提供备用字符串，用作按钮的标签。如果提供，它必须是适合作为按钮标签的非空字符串。

¥The alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device). If provided, it must be a non-empty string appropriate as a label for the button.

例如，如果你有一个图形按钮，显示带有图标和/或图片文本 "现在登录" 的图片，则还应将 alt 属性设置为 Login Now 之类的值。

¥For example, if you have a graphical button that shows an image with an icon and/or image text "Login Now", you should also set the alt attribute to something like Login Now.

注意：虽然 alt 属性在技术上是可选的，但你应该始终包含该属性以最大限度地提高内容的可用性。

¥Note: While the alt attribute is technically optional, you should always include one to maximize the usability of your content.

从功能上来说，<input type="image"> 元素的 alt 属性的作用与 <img> 元素上的 alt 属性类似。

¥Functionally, the alt attribute of the <input type="image"> element works just like the alt attribute on <img> elements.

指示将数据提交到的 URL 的字符串。这优先于拥有 <input> 的 <form> 元素上的 action 属性。

¥A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.

此属性也可用于 <input type="submit"> 和 <button> 元素。

¥This attribute is also available on <input type="submit"> and <button> elements.

标识将表单数据提交到服务器时使用的编码方法的字符串。共有三个允许值：

¥A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

application/x-www-form-urlencoded

这是默认值，使用 encodeURI() 等算法在 URL 编码 文本之后将表单数据作为字符串发送。

multipart/form-data

使用 FormData API 管理数据，允许将文件提交到服务器。如果你的表单包含 type file (<input type="file">) 的任何 <input> 元素，则必须使用此编码类型。

text/plain

纯文本;主要仅用于调试，因此你可以轻松查看要提交的数据。

如果指定，formenctype 属性的值将覆盖所属表单的 action 属性。

¥If specified, the value of the formenctype attribute overrides the owning form's action attribute.

此属性也可用于 <input type="submit"> 和 <button> 元素。

¥This attribute is also available on <input type="submit"> and <button> elements.

一个字符串，指示提交表单数据时使用的 HTTP 方法；该值会覆盖所属表单上给定的任何 method 属性。允许的值为：

¥A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get

URL 的构造方法是，从 formaction 或 action 属性给定的 URL 开始，附加问号 ("?") 字符，然后附加按 formenctype 或表单的 enctype 属性所述编码的表单数据。然后使用 HTTP get 请求将该 URL 发送到服务器。此方法适用于仅包含 ASCII 个字符的简单表单，并且没有副作用。这是默认值。

post

表单的数据包含在使用 HTTP post 请求发送到 formaction 或 action 属性指定的 URL 的请求正文中。此方法支持复杂的数据和文件附件。

dialog

此方法用于指示按钮关闭与输入关联的对话框，并且根本不传输表单数据。

此属性也可用于 <input type="submit"> 和 <button> 元素。

¥This attribute is also available on <input type="submit"> and <button> elements.

布尔属性，如果存在，则指定在提交到服务器之前不应验证表单。这会覆盖元素所属表单上 novalidate 属性的值。

¥A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

此属性也可用于 <input type="submit"> 和 <button> 元素。

¥This attribute is also available on <input type="submit"> and <button> elements.

指定名称或关键字的字符串，指示在何处显示提交表单后收到的响应。该字符串必须是浏览上下文的名称（即选项卡、窗口或 <iframe>。此处指定的值将覆盖拥有此输入的 <form> 上的 target 属性指定的任何目标。

¥A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or <iframe>. A value specified here overrides any target given by the target attribute on the <form> that owns this input.

除了选项卡、窗口或内联框架的实际名称之外，还可以使用一些特殊关键字：

¥In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self

将响应加载到与包含表单的浏览上下文相同的浏览上下文中。这将用接收到的数据替换当前文档。如果未指定，则这是使用的默认值。

_blank

将响应加载到新的、未命名的浏览上下文中。这通常是与当前文档位于同一窗口中的新选项卡，但可能会有所不同，具体取决于 user agent 的配置。

_parent

将响应加载到当前浏览上下文的父浏览上下文中。如果没有父上下文，则其行为与 _self 相同。

_top

将响应加载到顶层浏览上下文中；这是浏览上下文，是当前上下文的最顶层祖级。如果当前上下文是最顶层上下文，则其行为与 _self 相同。

此属性也可用于 <input type="submit"> 和 <button> 元素。

¥This attribute is also available on <input type="submit"> and <button> elements.

一个数字，指定绘制 src 属性指定的图片的高度（以 CSS 像素为单位）。

¥A number specifying the height, in CSS pixels, at which to draw the image specified by the src attribute.

一个字符串，指定要显示的图片文件的 URL，以表示图形提交按钮。当用户与图片交互时，输入的处理方式与任何其他按钮输入一样。

¥A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.

一个数字，指示绘制图片的宽度（以 CSS 像素为单位）。

¥A number indicating the width at which to draw the image, in CSS pixels.

¥Obsolete attributes

以下属性是由 HTML 4 为 image 输入定义的，但并非所有浏览器都实现，因此已被弃用。

¥The following attribute was defined by HTML 4 for image inputs, but was not implemented by all browsers and has since been deprecated.

如果指定了 usemap，则它必须是图片映射元素 <map> 的名称，该元素定义与图片一起使用的图片映射。这种用法已经过时了；当你想使用图片映射时，应该切换到使用 <img> 元素。

¥If usemap is specified, it must be the name of an image map element, <map>, that defines an image map to use with the image. This usage is obsolete; you should switch to using the <img> element when you want to use image maps.

¥Using image inputs

<input type="image"> 元素是 被替换的元素（其内容不是由 CSS 层生成或直接管理的元素），其行为方式与常规 <img> 元素基本相同，但具有 提交按钮 的功能。

¥The <input type="image"> element is a replaced element (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular <img> element, but with the capabilities of a submit button.

¥Essential image input features

让我们看一个基本示例，其中包含你需要使用的所有基本功能（这些功能与 <img> 元素上的功能完全相同。）：

¥Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <img> element.):

<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）。此外，如果你仅指定一个尺寸，则会自动调整另一个尺寸，以便图片保持其原始长宽比。

¥Overriding default form behaviors

<input type="image"> 元素 - 就像常规的 提交按钮 一样 - 可以接受许多覆盖默认表单行为的属性：

¥<input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior:

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

¥Using the x and y data points

当你使用使用 <input type="image"> 创建的按钮提交表单时，浏览器会自动向服务器提交两个额外的数据点 — x 和 y。你可以在我们的 X Y 坐标示例 中看到这一点。

¥When you submit a form using a button created with <input type="image">, two extra data points are submitted to the server automatically by the browser — x and y. You can see this in action in our X Y coordinates example.

当你单击图片提交表单时，你将看到作为参数附加到 URL 的数据，例如 ?x=52&y=55。如果图片输入具有 name 属性，请记住指定的名称在每个属性上都有前缀，因此如果 name 是 position，则返回的坐标将在 URL 中格式化为 ?position.x=52&position.y=55。当然，这也适用于所有其他属性。

¥When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example ?x=52&y=55. If the image input has a name attribute, then keep in mind that the specified name is prefixed on every attribute, so if the name is position, then the returned coordinates would be formatted in the URL as ?position.x=52&position.y=55. This, of course, applies to all other attributes as well.

这些是鼠标单击以提交表单的图片的 X 和 Y 坐标，其中 (0,0) 是图片的左上角，并且是默认值，以防在未单击图片的情况下进行提交。当单击图片的位置很重要时，可以使用这些方法，例如你可能有一张地图，单击该地图时，会将单击的坐标发送到服务器。然后，服务器端代码计算出点击的位置，并返回附近地点的信息。

¥These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image and the default in case submission happens without a click on the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.

在上面的示例中，我们可以编写服务器端代码来计算出提交的坐标点击了哪种颜色，并记录了人们投票的最喜欢的颜色。

¥In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.

¥Adjusting the image's position and scaling algorithm

你可以使用 object-position 属性来调整图片在 <input> 元素框架内的位置，并使用 object-fit 属性来控制如何调整图片的大小以适合框架。这允许你使用 width 和 height 属性指定图片的框架，以在布局中留出空间，然后调整图片在该空间内的位置以及如何（或是否）缩放它以占据该空间。

¥You can use the object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.

¥Examples

¥A login form

以下示例显示了与之前相同的按钮，但包含在典型登录表单的上下文中。

¥The following example shows the same button as before, but included in the context of a typical login form.

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 可以使基本元素更加整齐：

¥And now some simple CSS to make the basic elements sit more neatly:

div {
  margin-bottom: 10px;
}

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

¥Adjusting the image position and scaling

在此示例中，我们调整前面的示例，为图片留出更多空间，然后使用 object-fit 和 object-position 调整实际图片的大小和位置。

¥In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using object-fit and object-position.

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

¥Here, object-position is configured to draw the image in the top-right corner of the element, while object-fit is set to contain, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.

¥Technical summary

¥See also

• <input> 和实现它的 HTMLInputElement 接口。
• HTML <img> 元素
• 在 <input> 元素的框架内定位图片并调整其大小：object-position 和 object-fit
• CSS 属性的兼容性