编辑（2016-02-12）

Question

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

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

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

Answer 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 optinal text
  <p> you can even put it 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>，<command>，<datalist>，<dfn>，<em>，<embed>，<i>，{ {1}}，<iframe>，<img>，<input>，<kbd>，<keygen>，<label>，<mark>，{{1 }}，<math>，<meter>，<noscript>，<object>，<output>，<progress>，<q>，<ruby> ，<samp>，<script>，<select>，<small>，<span>，<strong>，<sub>，<sup>，{ {1}}，<svg>，<textarea>，<time>和纯文本（不仅包含空格字符）。

其他一些元素属于此类别，但仅在满足特定条件时才会生效：


<var>，如果它只包含措辞内容

<video>，如果它是元素的后代

<wbr>，如果它只包含措辞内容

<a>，如果它只包含措辞内容

<area>，如果存在itemprop属性

<del>，如果它只包含措辞内容

<ins>，如果存在itemprop属性

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

Answer 2

http://jsfiddle.net/cyB7B/

这对我有用...你有其他任何可能干扰的代码吗？ CSS也许？

带有html5的图像按钮

2 个答案:

编辑（2016-02-12）