How to create a Web Page ( Tutorial 5 )

Fill-out Forms

Getting Started

Fill-out forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you want to, you can write this program yourself, but I have no idea how to do it. I would check with your server. I know that many servers have scripts available for its users. Let's pretend that the one that I'm going to use is called "fb.pl". This will send a response to your fillout form directly to your email address. NOTE: This script is not real, it is just an example. Check with your ISP to see if they have built-in scripts.

Form Method/Action

The first thing that you type for your guestbook is the Form Method and Action. This is where you enter the Perl script. Most servers and Internet Providers have scripts like this that they provide for you. Check with yours. You cannot have any kind of forms without having a script. The address of the one that I'll be using is:
http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent to your email address, and the address is "a@a.com", you would type this for the first two lines:

<FORM METHOD="POST" ACTION="http://www.domain.com/cgi-bin/fb.pl">
<INPUT TYPE="input" NAME="recipient" value="a@a.com">TO:<P>

Here is what it will look like:

TO:

Next, you need to decide what questions that you want to ask, and what you will use to ask them. Before you start, though, you might want to check with your server to see if they have any questions that you MUST ask. I know with some ISPs, you must ask what their email address is, their first name, their last name, and what the subject of their question is. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists.

Single or multiple fields

In your guestbook, you might want to ask questions that have a single one word answer. To here is what you would type to have four fields that ask for an email address, a first name, a last name, and a subject:

<INPUT TYPE="input" NAME="from">Your Email Address<P>
<INPUT TYPE="input" NAME="firstname">Your First Name<P>
<INPUT TYPE="input" NAME="lastname">Your Last Name<P>
<INPUT TYPE="input" NAME="subject">Subject<P>

Here is what the result is:
Your Email Address
Your First Name
Your Last Name
Subject

Larger Fields

I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type:
Please place any questions or comments here:
<TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA><P>

Here is what the result looks like:

Please place any questions or comments here:

Checkboxes

Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type:
What are some things that you like to do?

<INPUT TYPE="checkbox" NAME="like" VALUE="TV">Watch TV<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="internet">Play on the Internet<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="read">Read a book<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="sports">Play sports<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="study">Study<P>

The result:
What are some things that you like to do?
Watch TV
Play on the Internet
Read a book
Play sports
Study

Radio Buttons

If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type:
What WWW browser are you using right now?

<INPUT TYPE="radio" NAME="browser" VALUE="Navigator 4.x">Netscape Navigator 4.x<P>

<INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x<P>

<INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator<P>

<INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic<P>

<INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer<P>

The Result:
What WWW browser are you using right now?

Netscape Navigator 4.x

Netscape Navigator 3.x

Netscape Communicator

Mosaic

Internet Explorer

Pull-Down Lists

Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type:
What is your favorite color?
<SELECT NAME="color">
<OPTION>Red
<OPTION>Yellow
<OPTION>Orange
<OPTION>Green
<OPTION>Blue
<OPTION>Purple
<OPTION SELECTED>Black
<OPTION>Brown
</SELECT><P>

The outcome is:
What is your favorite color? Red Yellow Orange Green Blue Purple Black Brown

Scroll-Down Lists

Some times, you might want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift . The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list.
What is your favorite video game system?
<SELECT NAME="video game" SIZE=3>
<OPTION VALUE="nintendo64">Nintendo 64
<OPTION VALUE="playstation">Sony Playstation
<OPTION VALUE="dreamcast">Sega Dreamcast
<OPTION VALUE="arcade">Arcade Games
</SELECT><P>

The outcome is:
What is your favorite video game system?

Nintendo 64 Sony Playstation Sega Dreamcast Arcade Games

---

What is your favorite video game system? (Hold shift to select more that one)
<SELECT NAME="video game" MULTIPLE SIZE=4>
<OPTION VALUE="nintendo64">Nintendo 64
<OPTION VALUE="playstation">Sony Playstation
<OPTION VALUE="dreamcast">Sega Dreamcast
<OPTION VALUE="arcade">Arcade Games
</SELECT><P>
The second outcome is:
What is your favorite video game system? (Hold shift to select more that one) Nintendo 64 Sony Playstation Sega Dreamcast Arcade Games

Reset Form

On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type:
To reset the all of the forms, press this button:<INPUT TYPE="reset" VALUE="Reset">
The outcome is: (try it!)
To reset the all of the forms, press this button:

Submit Entry

When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type:
To submit your choices, press this button:<INPUT TYPE="submit" VALUE="Submit">
The result is: (NOTE: Please don't click this button. It has been disabled and will not work.)
To submit your choices, press this button:
NOTE: At the very end of your form, you must type </FORM> or your forms won't work!!