HTML: Submit button with an image

There are many ways to represent a form <submit> button.

Using an <img> element wrapped around an <a 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 it's function!

Using <button>

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

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.

Published: Thursday, 15 December 2005