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

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

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

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

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

但你应该使用<button>-element，这更加灵活。它可以包含文本、图像或两者都包含：

<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>-a 内不允许有元素<button>-元素不再.

根据MDN HTML 元素参考 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button唯一允许的内容类别<button>-元素就是所谓的措辞内容 https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content:

措辞内容定义文本及其包含的标记。一系列的措辞内容组成了段落。

属于该类别的元素有<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr>和纯文本（不仅由空格字符组成）。

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

• <a>，如果它只包含短语内容
• <area>，如果它是某个元素的后代
• <del>，如果它只包含短语内容
• <ins>，如果它只包含短语内容
• <link>，如果 itemprop 属性存在
• <map>，如果它只包含短语内容
• <meta>，如果 itemprop 属性存在

_{*today was that I read about it, not when the change was introduced}