web-dev-qa-db-fra.com

bouton image avec html5

J'essaie de créer un bouton d'image. J'utilise/j'apprends html5 et jquery mobile. voici mon exemple de code:

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

l'image est affichée, mais le type d'entrée ne l'affiche pas. qu'est-ce que je fais mal?

imagehtml5jquery-mobile
8
AdrianoCelentano

<input type="image" src="img/beer.png" /> est destiné à collecter des coordonnées. Si vous souhaitez l'utiliser comme bouton d'envoi, vous devez ajouter un événement onsubmit-, par exemple.

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

Mais vous devriez plutôt utiliser l'élément <button>-, qui est beaucoup plus flexible. Il peut contenir du texte, des images ou les deux:

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

Modifier (2016-02-12)

À compter d'aujourd'hui *, l'exemple ci-dessus n'est pas considéré comme valide à 100% car les éléments<p>- ne sont plus autorisés dans un <button>- élément .

Selon la référence d'élément HTML MDN la seule catégorie de contenu autorisée dans un élément <button>- est le soi-disant Contenu de formulation:

Le contenu de la formulation définit le texte et les annotations qu’il contient. Des séquences de contenu de phrasé constituent des paragraphes.

Les éléments appartenant à cette catégorie sont <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> et texte brut (non seulement composé des espaces blancs).

Quelques autres éléments appartiennent à cette catégorie, mais seulement si une condition spécifique est remplie:

  • <a>, s'il ne contient que du contenu de formulation
  • <area>, s'il s'agit d'un descendant d'un élément
  • <del>, s'il ne contient que du contenu de formulation
  • <ins>, s'il ne contient que du contenu de formulation
  • <link>, si l'attribut itemprop est présent
  • <map>, s'il ne contient que du contenu de formulation
  • <meta>, si l'attribut itemprop est présent

* aujourd'hui, c'est ce que j'ai lu à ce sujet, pas lorsque le changement a été introduit

21
Quasdunk

http://jsfiddle.net/cyB7B/

Cela fonctionne pour moi ... avez-vous un autre code qui pourrait interférer? CSS peut-être?

1
Greg