©
本文檔使用 php中文網手册 發布
<input>类型的元素"image"用于创建图形提交按钮，即提交采取图像而不是文本形式的按钮。
<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
值 | 无 - 不应该指定值属性。 |
|---|---|
活动 | 没有。 |
支持的通用属性 | 所有，src，宽度，高度，形式，表单类型，表单方法，formnovalidate，格式 |
IDL属性 | 没有。 |
方法 | 没有。 |
值
<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该元素的表单所有者的属性。
formtargetHTML5此属性是一个名称或关键字，指示在提交表单后显示收到的响应的位置。这是浏览上下文的名称或关键字（例如，选项卡，窗口或内联框架）。如果指定了该属性，则将覆盖target该元素的表单所有者的属性。以下关键字具有特殊含义：
_
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;}规范
规范 | 状态 |
|---|---|
WHATWG HTML生活标准该规范中'<input type ='image'>''的定义。 | 生活水平 |
HTML5该规范中的<input type =“image”>“的定义。 | 建议 |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |