|You may also want to check out how to create a rollover submit image for a form|
IMAGEcreates 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>
Most of the attributes that work with
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>
Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.