<input type="image">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 来管理数据,允许向服务器提交文件。你必须使用该编码方式,如果你的表单包含 typefile<input type="file">)的任何 <input> 元素。

text/plain

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

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

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

formmethod

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

get

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

post

表单数据包含在请求的主体(body)中,并使用 HTTP post 请求发送到 formactionaction 属性指定的 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-fitobject-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
# image-button-state-(type=image)

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
type="image"

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见