David David - 4 months ago 6
HTML Question

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

I would like to have a submit button which 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?
Thanks for your help!

Answer

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.

Comments