Form Image Button Fields

You are here: irt.org | Articles | JavaScript | Form | Form Image Button Fields

Published on: Sunday 26th September 1999 By: Rafal Koszyk

• Introduction
• Form Image Type
• Image Link
• onSubmit and onReset Event Handlers
• CGI script

Introduction

So you want to use nice gifs instead of those ugly looking gray buttons to submit and reset your form? No Problem - just use form type=image. Or is there more to it than that?

This short article describes how to use the forms image input type to create a submit button (default) and a JavaScript solution for a reset button.

First the HTML for a simple form:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="submit">
<input type="reset">
</form>

Which looks like:

If we want to replace the default button text, then you can specify a value for each button:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>

The form now looks like:

To actually replace the grey buttons with our own images, then we have two options: we either use a different form field type, namely "image", or we use normal image links.

Form Image Type

The following show how to add image type form fields:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif">
<input type="image" src="reset.gif">
</form>

The form now looks like:

Note, we have used our own simple images submit.gif and reset.gif as the image sources. The images can be as plain or gratuitious as you feel capable of getting away with.

To remove the blue borders add a border attribute with a value of zero:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif" border="0">
<input type="image" src="reset.gif" border="0">
</form>

If you press the submit image then the form is submitted. However, if you press the reset image the form is also submitted. This is because the default action of an image form type is to submit the form.

To use an image to reset a form you have to use a normal image link...

Image Link

An image link is simple an image wrapped up in link tag:

<form name="formName" action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif" border="0">
<a href="javascript:document.formName.reset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

To allow the image to reset the form we use the JavaScript URL schema to invoke the reset method of the appropriate form.

onSubmit and onReset Event Handlers

The only problem with the previous use of image links is that invoking either the reset or submit method directly bypasses the forms onReset and onSubmit event handlers, as the following example demonstrates:

<script language="JavaScript"><!--
function mySubmit() {
    if (document.formName.login.value == '') {
        alert('You must enter a value');
        return false;
    }
    else {
        alert('Submitting');
        return true;
    }
}

function myReset() {
    alert('Resetting');
}
//--></script>

<form name="formName" action="example.cgi" onClick="return mySubmit()" onClick="myReset()" method="post">
<input type="text" name="login">
<br>
<a href="javascript:document.formName.submit()"><img src="submit.gif" border=0 alt="Submit"></a>
<a href="javascript:document.formName.reset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

The form can be incorrectly submitted with an empty form field.

To get around this we can invoke the onSumbit() and onReset() functions directly, by using the image links onClick event handler, which is always called by carrying out the required link navigation:

<script language="JavaScript"><!--
function mySubmit() {
    if (document.formName.login.value == '') {
        alert('You must enter a value');
        return false;
    }
    else {
        alert('Submitting');
        return true;
    }
}

function myReset() {
    alert('Resetting');
}
//--></script>

<form name="formName" action="example.cgi" method="post">
<input type="text" name="login">
<br>
<a href="javascript:document.formName.submit()" onClick="return mySubmit()"><img src="submit.gif" border=0 alt="Submit"></a>
<a href="javascript:document.formName.reset()" onClick="myReset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

As you can see if the function mySubmit() returns false, the false value effectively cancels the link navigation, i.e. the forms submit method is never invoked - it is cancelled.

CGI script

Finally, a copy of the CGI script used to process the forms in this article:

#!/usr/local/bin/perl

print 'Content-type:text/html' . "\n\n";

read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

@pairs = split(/&/, $buffer);

foreach $pair (@pairs) {
  ($name, $value) = split(/=/, $pair);
  $value =~ tr/+/ /;
  $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
  $FORM{$name} = $value;
}

print '<html><head><title>Form Output</title></head><body>';
print '<h2>Results from FORM post</h2>';

foreach $key (keys(%FORM)) {
  print $key . ' = ' . $FORM{$key} . '<br>';
}

print "</body></html>";

Feedback on 'Form Image Button Fields'

• Form Image Button Fields - Andrew Saturday September 22, 2007 at 10:59:59
• Form Image Button Fields - Mark October 17, 2002 at 12:12:48:
• Form Image Button Fields - Joe Dudek February 17, 2002 at 18:27:13:
• Form Image Button Fields - steve hall November 23, 2001 at 09:41:39:
• Form Image Button Fields - Camila 15:20:51 4/24/01
• Form Image Button Fields - Bernd Schwarz 05:43:53 2/13/01
• Form Image Button Fields - Jeffrey Sachs 11:49:18 12/14/00
• Form Image Button Fields - kerin 14:18:42 11/14/00
• Form Image Button Fields - Hans J�rgensen 10:00:13 8/02/00
• Form Image Button Fields - ramana surapaneni 20:19:44 3/13/00
• Form Image Button Fields - Tyler Bannister 15:53:51 2/04/00
• Form Image Button Fields - mam 14:17:39 2/01/00
• Form Image Button Fields - Robert E. Boughner 15:26:16 7/21/99

View the profile on Rafal Koszyk and the list of other Articles by Rafal Koszyk.