input type="image"

<input type="image">

<input>类型的元素"image"用于创建图形提交按钮，即提交采取图像而不是文本形式的按钮。

<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

值

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

使用图像输入

所述<input type="image">元件是一个替换元件（元件，其内容也不会产生或受到CSS层直接管理），在大致相同的方式作为常规行为<img>元件，但具有提交按钮的功能。

基本的图像输入功能

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

<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"> 元素 - 像常规的提交按钮 - 可以接受一些重写默认表单行为的属性：

formactionHTML5处理由input元素提交的信息的程序的URI，在这里如果指定了image，它将覆盖action元素的表单所有者的属性。formenctypeHTML5如果输入元素是图像，则此属性指定用于将表单提交给服务器的内容的类型。可能的值是：

• application/x-www-form-urlencoded：如果未指定属性，则为默认值。

• text/plain.

如果指定了该属性，则将覆盖enctype该元素的表单所有者的属性。

formmethodHTML5在图像输入元素中，该属性指定浏览器用于提交表单的HTTP方法。可能的值是：

• post：表单中的数据包含在表单的主体中，并发送到服务器。

• get：来自表单的数据被附加到表单属性URI，并带有'？' 作为分隔符，并将生成的URI发送到服务器。当表单没有副作用并且只包含ASCII字符时使用此方法。

如果指定，则此属性将覆盖method该元素的表单所有者的属性。

formnovalidateHTML5这个布尔属性指定表单在提交时不被验证。如果指定了该属性，则将覆盖novalidate该元素的表单所有者的属性。

• _self：将响应加载到与当前浏览环境相同的浏览环境中。如果未指定属性，则此值为默认值。

• _blank：将响应加载到新的未命名浏览上下文中。

• _parent：将响应加载到当前父浏览上下文中。如果没有父项，则此选项的行为方式与_self。

• _top：将响应加载到顶级浏览上下文（即，作为当前祖先的浏览上下文，并且没有父级）。如果没有父项，则此选项的行为方式与_self。

使用x和y数据点

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

例如，当您单击图像提交表单时，您将看到作为参数附加到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让基本元素更加整齐：

div {
  margin-bottom: 10px;
}

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

规范

浏览器兼容性