Welcome to the OzoneAsylum FaqWiki
Frequently Asked Questions

How do I use an image input as a reset button for a form? Pages that link to <a href="https://ozoneasylum.com/backlink?for=5345" title="Pages that link to How do I use an image input as a reset button for a form?" rel="nofollow" >How do I use an image input as a reset button for a form?\

Technically it isn't possible (as far as I'm aware and no one has corrected me yet) to have the attribute type="image" for reset input buttons. kuckus has suggested some answers:

Two possibilities:

1. Using CSS on the standard Reset button, like

<input value="" type="reset" style="background-image: url(http://www.OzoneAsylum.com/images/ASYLUM44b.jpg); border: 0; width: 300px; height: 90px; background-color: transparent;" />

This works as expected in IE, but doesn't in Mozilla. It just displays a blank gray button (which the correct width and height though).

2. Using JavaScript and the image's onclick event to reset the form:

<img src="http://www.OzoneAsylum.com/images/ASYLUM44b.jpg" onclick="document.forms[0 is a broken link.].reset();" />

Works beautifully in both IE and Mozilla

Relevant threads:

Reset form button as ImageField???

Using an image as a form reset button

Relevant links:

The JavaScript solutions:

How do I use my own graphic button to reset all the text fields in a form?

graphic form buttons script


(Added by: Emperor on Fri 18-Oct-2002)

(Edited by: Emperor on Fri 31-Jan-2003)

« BackwardsOnwards »

Show Forum Drop Down Menu