TYPE = IMAGE

You may also want to check out how to create a rollover submit image for a form

IMAGE creates an image that is also a "submit" button. When the user clicks on the image, the form is submitted.

<FORM ACTION="../cgi-bin/mycgi.pl">
name: <INPUT NAME="realname"> 
<INPUT 
     TYPE=IMAGE 
     SRC="../graphics/sfsubmit.gif" 
     HEIGHT=110 WIDTH=160 
     ALT="Send It In!" ALIGN=ABSMIDDLE
     >
</FORM>

gives us

name:

Most of the attributes that work with <IMG ...> also work with image inputs. Most particularly, make sure you use the ALT attribute.

Web browsers generally put a border around the image to indicate that it is "clickable", something that irritates many web designers because it detracts from the picture. If you want to get rid of the border, use BORDER:

<FORM ACTION="../cgi-bin/mycgi.pl">
name: <INPUT NAME="realname"> 
<INPUT 
     TYPE=IMAGE
     SRC="../graphics/sfsubmit.gif"  ALIGN="ABSMIDDLE" 
     HEIGHT=110 WIDTH=160  ALIGN="ABSMIDDLE" 
     ALT="Send It In!"
     BORDER=0 
     >
</FORM>

gives us

name:

However, make sure you provide some cue that the image is clickable. Some objections have been raised to getting rid of the border, because it gets rid of the "standard" cue that the image is clickable. However, image submit buttons have become quite common, and if the button is properly designed to look like a button and if it is situated where the submit button would usually be (at the end of the form), users will generally pick up that it is a button.

In addition to sending the form data, the web browser sends the x,y coordinate of where the user clicked. If the image input is not given a name then the browser sends the x and y coordinates as the "x" and "y" input fields.

If the input image does have a name, the x and y coordinates are sent using the format name.x and name.y. For example, when you click on the submit image in this form, the coordinates are sent as MySubmitImage.x and MySubmitImage.y. This feature can be used to check which image was clicked. For example, suppose you want to have an image for "Yes" and another for "No". If you name them "Yes" and "No" you can check if they clicked "Yes" by checking for the existence of the "Yes.x" field in the data that is sent. Try these buttons:

this code	produces this
<FORM ACTION="../cgi-bin/mycgi.pl"> <INPUT TYPE=IMAGE SRC="../graphics/yes.gif" HEIGHT=38 WIDTH=62 ALT="Yes" BORDER=0 NAME="Yes" > <INPUT TYPE=IMAGE SRC="../graphics/no.gif" HEIGHT=38 WIDTH=61 ALT="No" BORDER=0 NAME="No" > </FORM>