<input type="image">
====================

**`image`** 类型的 `<input>` 元素用于创建图形化的提交按钮，即采用图像而非文本形式的提交按钮。

尝试一下
----

值
-

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

额外属性
----

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

### alt

`alt` 属性提供一个备用字符串，在图像无法加载的情况下作为按钮的标注（由于错误，一个不能或者被设置为不能显示图像的 user agent，或用户正在使用屏幕阅读设备）。如果它被提供，它必须为非空字符串，且适合作为按钮的标签。

例如，如果你有一个按钮，显示一个带有图标和/或图像文本“现在登录”的图片，你也应该设置 `alt` 属性为类似于 `现在登录` 的东西。

**备注：** 虽然 `alt` 属性在技术上是可选的，但是你总应该包含它，以最大限度地提高你的内容的可用性。在功能上，`<input type="image">` 元素的 `alt` 属性与 `<img>` 元素的 `alt` 属性相类似。

### formaction

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

该属性也在 `<input type="submit">` 和 `<button>` 元素上可用。

### formenctype

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

`application/x-www-form-urlencoded`

这是默认值，它将会将表单数据在使用 `encodeURI()` 等算法进行 URL 编码后发送。

`multipart/form-data`

使用 `FormData` API 来管理数据，允许向服务器提交文件。你*必须*使用该编码方式，如果你的表单包含 `type` 为 `file`（`<input type="file">`）的任何 `<input>` 元素。

`text/plain`

纯文本；通常只在调试时有作用，你可以很容易看到要被提交的数据。

如果该属性被指定，`formenctype` 属性的值将会覆盖表单的 `action` 属性。

该属性也在 `<input type="submit">` 和 `<button>` 元素上可用。

### formmethod

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

`get`

以 `formaction` 或 `action` 属性给定的 URL 为前缀构造的一个 URL，在前缀后会附加一个问号（`?`）字符，然后附加表单数据，表单数据按照 `formenctype` 或表单的 `enctype` 属性的描述进行编码。构造的 URL 会通过 HTTP `get` 请求发送到服务器。此方法适用于仅包含 ASCII 字符，且没有副作用的简单表单。这是该属性的默认值。

`post`

表单数据包含在请求的主体（body）中，并使用 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>` 元素。

示例
--

### 一个登录表单

下面的例子显示和之前相同的按钮，但被包含在了一个典型登录表单的上下文中：

#### HTML


```html
<form>
  <p>登录到你的账户</p>
  <div>
    <label for="userId">用户 ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">密码</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>登录到你的账户</p>
  <div>
    <label for="userId">用户 ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">密码</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: #ddd;
}
```

规范
--

| Specification |
| --- |
| HTML Standard # image-button-state-(type=image) |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 实现它的 `<input>` 和 `HTMLInputElement` 接口。
* 在 `<input>` 元素的框架内改变图像的位置和大小：`object-position` 和 `object-fit`
* CSS 属性的兼容性