HTML: Submit button with an image

Published: Thursday, 15 December 2005

There are many ways to represent a form submit button.

Using an img element wrapped around an 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.

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 its function!

Using button

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

Much better, the tag name used now reflects its 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

Links