We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

How do I use images in forms?

balloomc
balloomc asked
on
Medium Priority
204 Views
Last Modified: 2012-05-04
How do I use images for the submit and reset buttons in forms and provide the same functionality?
Comment
Watch Question

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

Author

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.