HTML: Submit button with an image

1. Using an <img> element wrapped around an <a href/>

<form id="testForm">
  <a href="javascript:document.getElementById['testForm'].submit()">
    <img src="button.gif"/>
  </a>
</form>
    

This is generally a messy and long-winded way.

2. Using input element with type="image"

<form>
  <input type="image" src="button.gif"/>
</form>

Slightly better, but the image isn't an input and doesn't really reflect it's function!

3. Using <button>

<form>
  <button type="submit">
    <img src="button.gif" />
  </button>
</form>

Much better, the tag name used now reflects it's function. You can also insert other inline and block level objects, except for <a> and other form objects. Please see the links below for more details.

To make the button a reset button, simply change the type attribute to reset.

To make the button trigger a JavaScript action, simply change the type attribute to button and add an onclick attribute.