?
Solved

How do I use images in forms?

Posted on 1997-11-15
4
Medium Priority
?
183 Views
Last Modified: 2012-05-04
How do I use images for the submit and reset buttons in forms and provide the same functionality?
0
Comment
Question by:balloomc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1273979
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
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1273980
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
 

Author Comment

by:balloomc
ID: 1273981
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
 
LVL 6

Accepted Solution

by:
alamo earned 400 total points
ID: 1273982
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question