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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
alamoCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.