<按钮>与< input type =“图像”> [英] <button> versus <input type="image">

问题描述

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

This is for an "Add to basket" control for which one of my colleagues has designed a nice graphic. Obviously it should generate a post request, which a simple hyperlink isn't going to do.

Amazon使用图像输入来实现它。但是，

Amazon achieves it using an image input. But what are the pros and cons of

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

对比

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

（并使用CSS控制外观）？

(and using CSS to control the appearance)?

我想它可以归结为以下问题：

I guess it boils down to these questions:

• 所有图形和非图形浏览器都能成功使键盘可以访问图像输入的职责？ （或者，对于无键盘设备，可以通过任何输入方式访问它们？）

• Do all browsers, graphical and non-graphical, succeed in their duty to make image inputs keyboard-accessible? (Or, in the case of keyboardless devices, make them accessible by whatever the means of input is?)

那里有哪些不支持< button> ？

每种都有哪些其他优点/缺点？

What other advantages/disadvantages are there of each?

是否还有其他可能的方法具有自己的优势（除了忘记它并仅使用简单的提交）？

Are there any other possible approaches with their own advantages (besides forgetting it and just using a plain submit)?

推荐答案

它们应该是等效的。出于样式目的，我发现按钮标记在将来更改时会更灵活。

They should be equivalent. For styling purposes, I find button tags are more flexible if you change things in the future.

但是： IE有一个Bug /功能，其中按钮或输入的值设置为等于innerHTML。如果您的服务器端代码需要将此值设为特定值，则可能会导致问题。

But: IE has a bug/feature where the value of a button or input is set to equal the innerHTML. This can cause problems if your server side code needs this to be a particular value.

除非您需要< button> 的附加样式灵活性，否则需要<输入type = image> ，因此您无需处理IE的怪癖。

Unless you need the additional styling flexibility of <button> go with <input type="image"> so you don't need to deal with IE's quirks.

这篇关于<按钮>与< input type =“图像”>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！