Button image using html5

I am trying to create an image button. I am 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" /> 

an image is displayed, but the input type does not display the image. what am I doing wrong?

+6
source share
2 answers

<input type="image" src="img/beer.png" /> is for collecting coordinates. If you want to use it as a submit button, you need to add onsubmit -event, for example.

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

But it is better to use the <button> element, which is more flexible. It can contain text, images, or both:

 <button type="submit" name="beer" value="beer_btn_was_clicked"> Here 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> 

Edit (2016-02-12)

To date, * the above example is not considered 100% valid, since <p> elements are no longer allowed in a <button> element .

According to the link to the MDN HTML element, the permitted content category in the <button> element is the so-called Content Frasing :

The content of the phrase defines the text and the inscription contained in it. Phrasing entries 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 (consisting of more than just space characters).

Several other elements fall into this category, but only if a specific condition is met:

  • <a> if it contains only phrasal content
  • <area> if it is a descendant of an element
  • <del> if it contains only phrasal content
  • <ins> if it contains only phrase text
  • <link> if itemprop attribute is present
  • <map> if it contains only phrase text
  • <meta> if itemprop attribute is present

* today was what I read about it, and not when the change was made

+21
source

http://jsfiddle.net/cyB7B/

This works for me ... do you have any other code that might get in the way? Maybe CSS?

+1
source

Source: https://habr.com/ru/post/910886/


All Articles