带有html5的图像按钮

前端之家收集整理的这篇文章主要介绍了带有html5的图像按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试制作图像按钮.我正在使用/学习 html5jquery mobile.这是我的示例代码
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />

显示图像,但输入类型不显示图像.我做错了什么?

解决方法

< input type =“image”src =“img / beer.png”/>是为了收集坐标.如果您想将其用作提交按钮,则必须添加onsubmit-event,例如
<input type="image" src="img/beer.png" onsubmit="submit();" />

但您应该使用< 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>

编辑(2016-02-12)

截至今天*,上述示例不被视为100%有效,因为< p> -elements不再允许在< button> -element中.

根据MDN HTML element reference,< button> -element中唯一允许的内容类别是所谓的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

*今天是我读到的,而不是在引入变更时

原文链接:https://www.f2er.com/html5/168430.html

猜你在找的HTML5相关文章