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>
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
<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>
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.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>