带有html5的图像按钮

Question

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

<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> -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> -<button> 中不允许元素-不再有元素。

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

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Elements belonging to this category are <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> and plain text (not only consisting of white spaces characters).

A few other elements belong to this category, but only if a specific condition is fulfilled:

• <a>, if it contains only phrasing content
• <area>, if it is a descendant of a element
• <del>, if it contains only phrasing content
• <ins>, if it contains only phrasing content
• <link>, if the itemprop attribute is present
• <map>, if it contains only phrasing content
• <meta>, if the itemprop attribute is present

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