Submitting Form Data

Previous Page
Table of Contents
Next Page

Submitting Form Data

Every form must include a button that submits the form data to the server. You can put any label you like on this button with the value attribute:

<input type="submit" value="Place My Order Now!" />

A gray button will be sized to fit the label you put in the value attribute. When the user clicks it, all data items on the form are sent to the email address or program script specified in the form action attribute.

You can also include a button that clears all entries on the form so that users can start over if they change their minds or make mistakes. Use the following:

<input type="reset" value="Clear This Form and Start Over" />

If the standard Submit and Reset buttons look a little bland to you, you'll be glad to know that there is an easy way to substitute your own graphics for these buttons. Type the following to use an image of your choice for a Submit button:

<input type="image" src="button.gif" alt="Order Now!" />

The image named button.gif will appear on the page, and the form will be submitted whenever someone clicks the button.gif image. You can also include any attributes normally used with the <img /> tag, such as alt and style. (Hour 8, "Putting Graphics on a Web Page," introduces the <img /> tag.)

By the Way

The exact pixel coordinates where the mouse clicked an image button are sent along with the form data. For example, if someone entered sol@shoesandglasses.net in the form as shown in Figure 18.3, the resulting form data might look like the following:


Figure 18.3. Forms don't need to be complex to be effective. (They might need to be a little less blunt, though.)

Normally you should ignore the x and y coordinates, but some server scripts use them to turn the button into an imagemap.

Listing 18.2 and Figure 18.3 show a very simple form that uses a customized Submit button. (You saw how to make graphics similar to the signup.gif button in Hour 7, "Creating Your Own Web Page Graphics.")

Listing 18.2. This Page Uses an <input /> Tag as a Custom Graphical Submit Button
<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <h1>Free Electronic Junk Mail!</h1>
    <form method="post" action="mailto:you@youremail.com" enctype="text/plain">
        To start receiving junk e-mail from us daily*, enter your e-mail address
        below and click on the <em>SignUP!</em> button.
        <input type="text" name="anotherone" size="25" />
        <input type="image" src="signup.gif" alt="Sign Up Now!"
        style="vertical-align:middle" />
        By clicking the above button, you also agree to the terms of our Marketing
        Agreement, which is available upon request at our offices in Bangkok,
        Thailand. A fee may be charged for removal from our list if you elect at a
        later date not to receive additional sales literature.

Did you Know?

You can make a button that cancels the form and proceeds to another page (ignoring all information the user has entered so far) simply by linking to that other page. Here is an example:

<a href="nodice.html">Click here to cancel.</a>

There is no specific form type for a graphical reset button, but you can achieve the same effect by putting an image link to the current page, like this:

<a href="thispage.html"><img src="cancel.gif" alt="Cancel" /></a>

Previous Page
Table of Contents
Next Page
© 2000- NIV