带有html5的图像按钮 [英] image button with html5

问题描述

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

I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:

<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 ?

推荐答案

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

<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="submit();" />

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

But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:

<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> -elements不允许< button> -element 。

---

Edit (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.

根据 MDN HTML元素参考 <$ $中唯一允许的内容类别c $ c>< button> -element是所谓的 短语内容 ：

According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:

短语内容定义文本和标记它包含。短语内容的运行构成段落。

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

属于此类别的元素是< abbr> ，< audio> ，< b> ，< bdo> ，< br> ，< button> ，< canvas> ，< cite> ，< code> ，< command> ; ，< datalist> ，< dfn> ，< em> ，< embed> ，< i> ，< iframe> ，< img> ，< input> ，< kbd> ，< keygen> ，< label> ，< mark> ，< math> ，< ;米> ，< noscript> ，< object> ，< output> ，< progress> ，< q> ，< ruby​​> ，< samp> ，< script> ，< se lect> ，< small> ，< span> ，< strong> ，< sub> ，< sup> ， < svg> ，< textarea> ，< time> ，< var> ，< video> ，< wbr> 和纯文本（不仅包含空格字符）。

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> ，如果它只包含措辞内容


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


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


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


• < link> ，如果存在itemprop属性


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


• < meta> ，如果存在itemprop属性

• <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

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

这篇关于带有html5的图像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！