<button>与<input type =“image”/> </button>

时间:2009-06-29 10:51:04

标签: html accessibility

这是一个“添加到篮子”控件,我的一位同事设计了一个漂亮的图形。显然它应该生成一个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>

  • 每种优势/劣势还有哪些?

  • 有没有其他可能的方法有自己的优势(除了忘记它并只使用简单的提交)?

3 个答案:

答案 0 :(得分:2)

他们等同。出于样式目的,如果您将来更改内容,我会发现按钮标签更灵活。

但是: IE有一个错误/功能,其中按钮或输入的值设置为等于innerHTML。如果服务器端代码需要将此值设置为特定值,则可能会出现问题。

除非您需要<button>的额外样式灵活性,否则请使用<input type="image">,这样您就不需要处理IE的怪癖。

答案 1 :(得分:0)

输入类型=“图像”支持已禁用属性,浏览器将为您灰显图像。使用Type = Button,您必须提供备用灰色图像。

答案 2 :(得分:0)

来自MDN:

  

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

所以一个区别是input[type=image]传输您单击的像素的坐标。现在是2019年,button得到了很好的支持,因此除非我真的需要x, y,否则我会亲自使用它-可以说,如果图像是地图,并且我想知道用户在地图上单击的位置。 / p>