image button with html5

Question

I'm trying to make an image button. I'm 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" />

the image is displayed, but the input type doesn't show the image. what do i do wrong ?

your code is working, when i don't use jquery libraries. Has anyone a idea how i can use the button element with an image and using jquery mobile libraries like this jsfiddle.net/cyB7B/3 — AdrianoCelentano
– AdrianoCelentano, Commented Mar 19, 2012 at 13:19

Sarah · Accepted Answer · 2021-06-01 10:01:36Z

24

<input type="image" src="img/beer.png" /> is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.

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

But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:

<button type="submit" name="beer" value="beer_btn_was_clicked">
  Here's some optional text,
  <p>which you can even put in a paragraph!</p>

  And you don't even need JavaScript!

  <img src="img/beer.png" />
</button>

Edit (2016-02-12)

As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.

According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content 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 (not only consisting of white spaces characters).

A few other elements belong to this category, but only if a specific condition is fulfilled:

<a>, if it contains only phrasing content

<area>, if it is a descendant of a element

<del>, if it contains only phrasing content

<ins>, if it contains only phrasing content

<link>, if the itemprop attribute is present

<map>, if it contains only phrasing content

<meta>, if the itemprop attribute is present

_{*today was that I read about it, not when the change was introduced}

edited Jun 1, 2021 at 10:01

Sarah

31 silver badge4 bronze badges

answered Mar 16, 2012 at 9:02

Quasdunk

15.2k3 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lori Over a year ago

I'm trying to figure out the difference between the "legal" and "illegal" examples of img elements inside button elements in the w3c docs link. The only difference I see is that in the example cited as illegal, the content of the 'button` consists entirely of the img

Quasdunk Over a year ago

@user1269964 It's not about the image itself, it's about the image map. So it's not allowed to use the usemap-attribute for img-element within a button element. That's one of the few restrictions for content within a button-element (not sure if forms are valid content for button).

Greg · Accepted Answer · 2012-03-16 08:58:19Z

1

http://jsfiddle.net/cyB7B/

This works for me...have you got any other code that could be interfering? CSS maybe?

answered Mar 16, 2012 at 8:58

Greg

31.3k18 gold badges69 silver badges86 bronze badges

Collectives™ on Stack Overflow

image button with html5

2 Answers 2

Edit (2016-02-12)

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit (2016-02-12)

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related