Once you've got your website up and running, you might like to get some feedback
from your visitors as to what kinds of things they'd like to see at the site, or
have them vote on whether they like Product A better than Product B, or maybe you'd
like to ask them to fill out a survey about whether they like your site re-design?
(of course they will!). In order to do this, you're going to have to create a form.
Forms require a cgi script, but don't worry you will not need to write
it. The script causes the information which is entered into the form to be emailed
directly to your inbox. You will however almost certainly have to contact your host
provider to see how they handle cgi scripts and what you will have to put in your
form's variable sections in order for it to work with their server. With our host
we simply sent them our form as we had drafted it and they made the changes for us.
That was nice of them wasn't it?
That said, the creation of a form is fairly straightforward. Just like other HTML
tags (you'll remember what those are from earlier Chapters), a form requires two:
<FORM> to tell the browser that what follows is
a form, and </FORM> to tell it that the form has
come to an end. Just like all of the tags that we've discussed, you must have both.
What comes up, must come down. If you forget the ending tag (</FORM>),
which is actually a fairly common mistake, the form won't work at all and, in fact,
you may end up with a blank screen in your browser rather than your painstakingly
created effort.
Let's try a fairly simple one, shall we?
Here's a form that simply asks for someone's email address so that they can be
added to a mailing list:
The visitor enters his or her email address in the box (also known as a "field"),
presses the "Submit" button, and their email address is sent by
magic (er, email) to your mailbox. It's not foolproof, it's quite easy for people
to enter an invalid email address in the box, er "field," but it's a good
example of a form at its simplest.
Normally the "Submit" button is a fairly unattractive square gray rectangle
with the word "submit" on it. You can, however, make the button say anything
you like, for instance:
, , or even, for the sake of illustration,
The code which creates the above simple form is:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="http://www.willa.com/cgi-bin/cgiemail/phobic.txt"
METHOD="POST" ENCTYPE="application/x-www-form-urlencoded">
<BLOCKQUOTE>
<CENTER>
<P><FONT SIZE="2" face="arial">Your
Email Address:<B> </B></FONT><INPUT
TYPE="TEXT" NAME="email" SIZE="30"><INPUT
TYPE="SUBMIT" NAME="Submit" VALUE="Submit"></P>
</CENTER>
</BLOCKQUOTE>
</BODY>
</HTML>
To put something other than "Submit" on the button, you change what you
put in the "VALUE" field, that is, instead of "VALUE="Submit,"
you put "VALUE="Click here" or whatever
else you like. At the risk of overstating this - the variable is the VALUE not
the NAME.
If you wish, you can replace the plain gray button with a more attractive graphic,
i.e.,
To substitute a graphic for the plain gray box, instead of VALUE="Submit"
you add this command: SRC="click.gif"
WIDTH="75" HEIGHT="57" ALIGN="MIDDLE" BORDER="0".
Have a look at the source of this page you 're reading
if you're still uncertain. [That's View/Page Source in your browser]
If you decide to use a graphic instead, be sure to make
it obvious that the graphic is substituting for the "Submit" button by
designing it with the words "Click," "Press here," or some other,
hard to miss, text command, since, unlike other graphics that do things like link
to other pages, a graphic submit button won't give any indication that it has any
purpose other than to just sit there looking attractive.
Click to continue