How can I make my <input type="submit" /> an image?

input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

You can override the style given by the browser to the button.

For example adding this to your css does the trick for me (on Chrome):

.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}

But really if you are not going to use the browser's css for the button, you should probably not use <input type='submit'> at all, and just insert the image (via an <img src="" /> tag or a <div> with the image as background) and attach a click listener to it.

For example:

The html:

<div class="controls">
    <img src="/yourimage.png" />
</div>

The javascript (assuming you use jQuery):

$('.controls img').click(function(){... stuff to do...});

Use an image submit button, as the doc says:

<input type="image"> defines an image as a submit button

<input type=image src=button.png alt="Submit feedback">

(I would not use an image suggesting snailmail when setting up an online form, but maybe there is some reason to create such associations.)

simple and easy way to make an INPUT tag as an image

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">