【问题标题】：image button with html5带有 html5 的图像按钮
【发布时间】：2012-03-16 08:52:50
【问题描述】：

我正在尝试制作一个图像按钮。我正在使用/学习 html5 和 jquery mobile。这是我的示例代码：

<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />

显示图像，但输入类型不显示图像。我做错了什么？

【问题讨论】：

当我不使用 jquery 库时，您的代码正在运行。有谁知道我如何将按钮元素与图像一起使用并使用像这样的 jquery 移动库jsfiddle.net/cyB7B/3

标签： image html jquery-mobile

【解决方案1】：

<input type="image" src="img/beer.png" /> 用于收集坐标。如果您想将其用作提交按钮，则必须添加一个onsubmit-事件，例如

<input type="image" src="img/beer.png" onsubmit="submit();" />

但是您应该使用更灵活的<button>-元素。它可以包含文本、图像或两者兼有：

<button type="submit" name="beer" value="beer_btn_was_clicked">
  Here's some optional text,
  <p>which you can even put in a paragraph!</p>

  And you don't even need JavaScript!

  <img src="img/beer.png" />
</button>

编辑 (2016-02-12)

截至今天*，上述示例不被视为 100% 有效，因为 <p>-元素不再允许在 <button>-元素中使用。

根据MDN HTML element reference，<button> 元素中唯一允许的内容类别是所谓的Phrasing content：

短语内容定义文本及其包含的标记。大量的短语内容组成段落。

属于该类别的元素有<abbr>、<audio>、<b>、<bdo>、<br>、<button>、<canvas>、<cite>、<code>、@987654@4 987654343 @，<dfn>，<em>，<embed>，<i>，<iframe>，<img>，<input>，<kbd>，<keygen>，<label>，<mark>，<math> , <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <small>, <small>, <small>, <ruby> 987654368@、<sub>、<sup>、<svg>、<textarea>、<time>、<var>、<video>、<wbr> 和纯文本（不仅包含空格字符）。

其他一些元素属于此类别，但前提是满足特定条件：

<a>，如果它只包含短语内容

<area>，如果是元素的后代

<del>，如果它只包含短语内容

<ins>，如果它只包含短语内容

<link>，如果 itemprop 属性存在

<map>，如果它只包含短语内容

<meta>，如果 itemprop 属性存在

_{*今天是我读到它，而不是在引入更改时}

【讨论】：

我试图找出 w3c 文档 link 中 button 元素中 img 元素的“合法”和“非法”示例之间的区别。我看到的唯一区别是，在引用为非法的示例中，“按钮”的内容完全由 img
@user1269964 这不是关于图像本身，而是关于 image map。因此，不允许在按钮元素中使用 img 元素的 usemap 属性。这是对 button 元素中内容的少数限制之一（不确定表单是否是 button 的有效内容）。

【解决方案2】：

http://jsfiddle.net/cyB7B/

这对我有用...您还有其他可能干扰的代码吗？可能是 CSS 吗？

【讨论】：