How to make a submit button with text + image in it?

Question

I would like to have a submit button that contains text and an image. Is this possible?

I can get the exact look I want with code that looks like:

<button type="button"> <img src="save.gif" alt="Save icon"/> <br/> Save </button> 

... but I haven't found a way to have one of those for my forms. Is there a way to do that with an

<input type="submit" ...>  

element? Or am I forced to go the image or text way?

Answer 1

Let's say your image is a 16x16 .png icon called icon.png Use the power of CSS!

CSS:

input#image-button{     background: #ccc url('icon.png') no-repeat top left;     padding-left: 16px;     height: 16px; } 

HTML:

<input type="submit" id="image-button" value="Text"></input> 

This will put the image to the left of the text.

Answer 2

input type="submit" is the best way to have a submit button in a form. The downside of this is that you cannot put anything other than text as its value. The button element can contain other HTML elements and content.

Try putting type="submit" instead of type="button" in your button element (source).

Pay particular attention however to the following from that page:

If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.