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"/>

This is generally a messy and long-winded way.

Using input element with type="image"

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

Slightly better, but the image isn’t an input and doesn’t really reflect its function!

Using button

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

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