与(<button> versus <input type=“image”>

这是针对我的一个同事设计了一个漂亮的图形的“添加到购物篮”控制。 显然，它应该产生一个POST请求，其中一个简单的超级链接是不会做的。

亚马逊实现使用图像输入它。 但是，什么是职业玩家的利弊

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

与

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

（使用CSS来控制外观）？

我想这可以归结为以下这些问题：

• 是不是所有的浏览器，图形和非图形，履行职责取得成功，使图像输入键盘进行访问？ （或者，在没有键盘设备的情况下，让他们以任何输入的方式是访问？）

• 什么浏览器是否有不支持<button> ？

• 分别有什么其他的优势/劣势呢？

• 是否有自己的优势，任何其他可能的方法（除了忘记它，只是使用普通提交）？

Answer 1:

它们应该是等价的。 为了造型的目的，我觉得如果你在未来改变的东西按钮标签更加灵活。

但：IE有一个错误/特征，其中一个按钮或输入的值被设置为等于的innerHTML。 如果你的服务器端代码需要这是一个特定的值，这可能会导致问题。

除非你需要额外的造型灵活性<button>去与<input type="image">这样你就不会需要处理IE的怪癖。

Answer 2:

INPUT TYPE =“图片”支持残疾人属性，浏览器将变成灰色图像为您服务。 随着类型=按钮你就必须提供备用灰度图像。

Answer 3:

从MDN：

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

这样一个不同之处在于input[type=image]发送你点击的像素的坐标。 这是2019年button是很好的支持所以我个人使用它，除非我真的需要x, y -可以说，如果图像是一张地图，我想知道用户在地图点击。

文章来源: versus