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
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> gives us
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
|