<button>与<input type="image">的区别

Question

这是一个用于“添加到购物篮”控件的设计，我的一位同事设计了一个漂亮的图形。显然，它应该生成一个POST请求，而一个简单的超链接是做不到的。

亚马逊使用了图像输入来实现它。但是，利弊如何呢？

<input type="image" src="atb.png" alt="Add to Basket" />

对比

<button type="submit"><img src="atb.png" alt="Add to Basket" /></button>

那么，我想归结为以下问题：

• 所有浏览器（包括图形化和非图形化的）是否都成功地使图像输入键盘可访问？（或者，在无键盘设备的情况下，通过任何输入方式使它们可访问？）

• 有哪些不支持<button>的浏览器？

• 每种方法还有哪些其他优缺点？

• 除了放弃它并只使用普通提交外，还有其他可能具有自己优势的方法吗？

（并使用CSS控制外观）？

- Stewart

Answer 1

他们应该是等价的。就样式而言，如果未来需要更改，我发现按钮标签更加灵活。

但是：IE存在一个错误/特性，其中按钮或输入的值设置为等于innerHTML。如果您的服务器端代码需要特定的值，则可能会出现问题。

除非您需要额外的样式灵活性，否则请使用，以便您不必处理IE的怪癖。

- edeverett

---

附注：IE8标准模式已经修复了IE的错误。 - scunliffe

是的，我也注意到了IE的这个 bug。我们可能最终只在表单中使用一个这样的按钮，这样就不会有问题了。但是我能看出来可以将一些内容添加到 innerHTML 中，供服务器端代码检测。但是<input type="button">？这是打字错误吗，还是我漏掉了什么？ - Stewart

是的，那是个打错字。抱歉。已经修复了。 - edeverett

Answer 2

输入类型为“Image”的元素支持Disabled属性，浏览器会将图像变灰。如果使用Type=Button，则需要提供替代的灰色图像。

- Clive Paterson

Answer 3

来自MDN：

当您使用使用<input type="image">创建的按钮提交表单时，浏览器会自动向服务器提交两个额外的数据点 - x和y。

因此，一个区别是input[type=image]会传输您单击的像素的坐标。现在已经是2019年了，button得到了很好的支持，所以我个人使用它，除非我真的需要x, y - 比如说，如果图像是地图，我想知道用户在地图上单击了哪里。

- Paulo Scardine