weballey logo
 
left forms - image backnext right
homesearchsite mape-mail
intro
text
textarea
buttons
< image >
form
e-mail form
checkbox
radio
select
password
hidden
layout
cgi
tags
epilogue
      If you don't like the plain submit button, you can use an image. You can also use the image like an image map. Getting different results depending on where you click the image. An image element ALWAYS submits the form.

<INPUT TYPE="image" NAME="submit" SRC="button.gif" BORDER="0" ALT="button">

    The code resembles that of a ordinary image, but it is not the same. You can use the alt, border and align attributes here, but not height and width. The image is called with the SRC attribute.

Image map
    Try pressing one of the button images above. You will see the output is different from other form elements. You will get two variables from the image. Both contain the name, a point, an x or y, and a value. These last values depend on where you clicked the image. With these values you could set up an image map like construction. The related cgi program or javascript would have to handle this, since you cannot use client side image maps within forms.

Reset button
    Some of you might want to use an image for the reset button too. Remember an image button always submits a form. So this is only possible with a trick. You will have to create a hyperlinked image, with a javascript action in the HREF attribute. This action will then trigger the reset of the form. You need to name the form too with a NAME attribute. Try entering some text and then press the button.

<FORM NAME="theform">
<INPUT>
<A HREF="javascript:document.theform.reset()">
<IMG SRC="button.gif" ALT="Reset"></A>
</FORM>

Reset
bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right