<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