web-dev-qa-db-ja.com

HTML5の画像ボタン

画像ボタンを作ろうとしています。私はhtml5とjqueryモバイルを使用/学習しています。これは私のサンプルコードです：

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

画像は表示されますが、入力タイプは画像を表示しません。私は何を間違っていますか？

imagehtml5jquery-mobile
9
AdrianoCelentano

<input type="image" src="img/beer.png" />は座標を収集するためのものです。送信ボタンとして使用する場合は、onsubmitイベントを追加する必要があります。

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

ただし、より柔軟な<button>要素を使用する必要があります。テキスト、画像、またはその両方を含めることができます。

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

本日*以降、<p>- elementsは<button>- element内では許可されないため、上記の例は100％有効とは見なされません。

MDN HTML要素参照 によると、<button>-要素内で許可されているコンテンツカテゴリは、いわゆるフレーズコンテンツ：

フレージングコンテンツは、テキストとそれに含まれるマークアップを定義します。一連のフレージングコンテンツが段落を構成します。

このカテゴリに属する​​要素は、<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属性が存在する場合

*今日は、変更が導入されたときではなく、それについて読んだ

21
Quasdunk

http://jsfiddle.net/cyB7B/

これは私にとってはうまくいきます...干渉する可能性のある他のコードを入手しましたか？ CSS多分？

1
Greg