Html 带有 html5 的图像按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9734260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image button with html5
提问by AdrianoCelentano
I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:
我正在尝试制作一个图像按钮。我正在使用/学习 html5 和 jquery mobile。这是我的示例代码：
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />
the image is displayed, but the input type doesn't show the image. what do i do wrong ?
显示图像，但输入类型不显示图像。我做错了什么？
回答by Quasdunk
<input type="image" src="img/beer.png" />is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.
<input type="image" src="img/beer.png" />旨在收集坐标。如果您想将其用作提交按钮，则必须添加一个onsubmit-event，例如
<input type="image" src="img/beer.png" onsubmit="submit();" />
But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:
但是你应该使用<button>-element，它更灵活。它可以包含文本、图像或两者兼而有之：
<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>
Edit (2016-02-12)
编辑 (2016-02-12)
As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.
截至今天*，上面的例子不被认为是 100% 有效的，因为<p>-elements 不再允许在<button>-element 中。
According to the MDN HTML element referencethe only permitted content category within a <button>-element is the so called Phrasing content:
根据MDN HTML 元素参考，元素中唯一允许的内容类别<button>是所谓的短语内容：
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
短语内容定义了文本及其包含的标记。语句内容的运行构成了段落。
属于这一类的元素是
<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
*今天是我读到它，而不是在引入更改时
回答by Greg
This works for me...have you got any other code that could be interfering? CSS maybe?
这对我有用......你有任何其他可能会干扰的代码吗？CSS 也许？
