Use <input type="image"> Instead of <input type="submit">

My guess is that using an image as a submit button inside a form hasn't posed you many challenges. There are at least a few ways this can be achieved. Perhaps the most common way would be to wrap an <image> element inside a <button> element like so:

<button>
  <img src="myImage.jpg">
</button>

This works just fine, but there is a rule-of-thumb that we use the <button> element if our button's action keeps our user on the current page and our forms sometimes navigate our user to a different page.

For this reason you can opt to use the <input type="image"> element that effectively works the same as a <input type="submit"> element, but unlike taking a value attribute renders an image passed to a src attribute like so:

<input type="image" src="myImage.png">

Note: The image input element is self-closing like other inputs.

Here's a demo of the image input element in use:

To learn more about the image input element check out the MDM page about it.

Code on web assassins!