How do I use images in forms?

How do I use images for the submit and reset buttons in forms and provide the same functionality?
balloomcAsked:
Who is Participating?
 
alamoConnect With a Mentor Commented:
Christian's second syntax is correct, assuming it's inside a form - e.g. the following will work as an image submit button...

<form action="whatever" method="GET">
<input type=image src="image.gif">
</form>

How does it know it's a submit? Because that's the *only* possibility - you *can't* use an image for a reset button. The image-as-submit is there for imagemaps (it sends the x and y coordinates of the image click along with the form values).

There is a javascript-based workaround - put an image in as a normal link and use the onClick event to manually clear the form values. This only works in NS3+ (because before then you couldn't cancel the activation of the link, clicking the image would send you off to another page). So for NS3+ and IE3+ with javascript enabled, the following form will have a reset image. All other browsers won't have any reset at all.

<form name="frm" method="GET" action="action.pl">
<input type=text name="txt">
<input  type=image src="submitimage.gif" border=0>
<script language="JavaScript1.1">
document.write('<a href="" onClick=\'document.frm.txt.value=""; return false;\'><IMG SRC="resetimage.gif" border=0></a>');
</script>
</form>

I know this isn't exactly what you wanted, but the standard answer you will get about using an image for a reset button is "Can't do it, period" so this is a real improvement :-) Leave a comment if I am unclear about any of this. Good luck!
0
 
Christian_WenzCommented:
use <INPUT TYPE="IMAGE">
Do not name any other element of that form "x" or "y", as in these variables the coordinates of the mouseclick are stored.
You might alternatively try:
<A HREF="#" onClick="document.forms.submit()"><IMG SRC=".."></A>
0
 
Christian_WenzCommented:
whoops - almost forgot:
it's <INPUT TYPE="IMAGE" SRC="image.gif">
sorry...

I'd suggest that you remove your other question, which is basically the same!
0
 
balloomcAuthor Commented:
This still doesn't answer my question about how to add functionality.  Basically, if I include an Input Type="Image" and provide the src for it, that still doesn't tell me what to do so that the form image knows whether to submit or reset.  The second alternative didn't even work!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.