画像ボタンを作ろうとしています。私はhtml5とjqueryモバイルを使用/学習しています。これは私のサンプルコードです:
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />
画像は表示されますが、入力タイプは画像を表示しません。私は何を間違っていますか?
<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>
本日*以降、<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属性が存在する場合
*今日は、変更が導入されたときではなく、それについて読んだ
これは私にとってはうまくいきます...干渉する可能性のある他のコードを入手しましたか? CSS多分?