HTML Forum

**weirdgear** · 10-13-2005, 11:57 AM

Is it possible to use a graphic in place of the default grey Reset button to clear the contents of the form?

This is the code I am using below;

<input type="image" src="images/submit_blk.gif" name="Submit" value="Submit">
<input type="image" src="images/clear_blk.gif" name="Reset" value="Reset">

After I click the clear button, the form submits instead of reseting!

Does anyone know what I am doing wrong?

**gringo** · 10-13-2005, 12:14 PM

If you use type="image", the browser renders a submit button. You need type="reset" for your reset button. You can use css to give the reset a background button:

HTML Code:

<html>
  <head>
    <style type="text/css">
      input.img {
      	background-image:  url(bg.gif);
      }
    </style>
  </head>
  <body>
    <form>
      <input class="img" type="reset" />
    </form>
  </body>
</html>

**weirdgear** · 10-13-2005, 12:40 PM

Thanks for your help gringo, I will try that out.

**funkdaddu** · 10-13-2005, 03:37 PM

Another way is to just use a regular image and use JavaScript by putting

Code:

onclick="YourFormName.reset();"

in the IMG tag.

**Juanma** · 10-13-2005, 09:49 PM

this is a example with js for give a Rollover image style for reset and submit form button:

In the html Head:

PHP Code:


			
<SCRIPT language="Javascript">

function send() {

document.form.submit();

}

</SCRIPT>

and then intro the form tags:

HTML Code:

<form name="form" method="get">
   <a href= "javascript:send()" 
         onmouseOver="document.send.src='sending1.gif';"    
         onmouseOut="document.send.src='sending2.gif';">
   <img name="send" src="sending2.gif" border="0">
</a>
</form>