Bison - Forms: Page 4

Here is a sample survey that you may freely use on your GeoCities home page. This is intended to show you one example of how you can develop a form to include on your home page. To change the questions or answers, simply change the text associated with the question.

Please note that you can use your shortcut (membername) URL or the longer Neighborhood URL.

This basic example of a form will send the member an E-mail with the following format:

Subject: Survey Results
Sent from Mail Form posted at:  
http://www.geocities.com/membername/forms.html

(NAME)  GeoCities User
(Age)  35-44
(Visit)  monthly
(Subject)  Survey Results
(next-url)  http://www.geocities.com/membername/nextpage.html

The values will change according to what the users choose as their answers.

Okay, Time to get to work.

You need to create a page named forms.html. You need to open this page in your favorite editor and add the following code.

If you would like to, you can open a window to the GeoCities File Manager and work along with this lesson.

Let's start with a header:

<html>
<head>
<title>Simple Survey</title>
</head>
<body>
<h3>Please fill out my Survey</h3>

Now we want to start the form with the <FORM> tag.

The text "/cgi-bin/homestead/mail.pl?membername" must be in lower case.

FORM is the beginning tag. We want to POST the information to the server and the ACTION by which we do that is the program on the sever called "/cgi-bin/homestead/mail.pl?" to which we add our membername. We do NOT want to put our address in place of the homestead. If my membername were teacher1, then it would look like this:
<form method="post" action="/cgi-bin/homestead/mail.pl?teacher1">

Once you learn this line, it will be the same on every form you use to get a return email from GeoCities.

Now, for some input

<p>Please tell me your name:<input type="text" name="Name" size="30" maxlength="30"> (Do not hit return.)</p>

The INPUT will be "TEXT", as the user will be typing their name. The NAME of this input is "Name". This will appear as: "(Name) GeoCities User" in the email you receive. We set the SIZE of the text box that will appear as 30 characters. And so some one doesn't fill our email with 3,000 X's, we limit them to 30 characters with MAXLENGTH.
The reason we ask your visitor to not hit return is because this is the same as selecting the Submit Button and will send the form.

Let's find out more about them.

<dl>
<dt> 1) How old are you?</dt>
<dd>
<input type="radio" name="Age" value="-18">Under 18 years old<br>
<input type="radio" name="Age" value="19-24">Between 19 and 24 years old<br>
<input type="radio" name="Age" value="25-34">Between 25 and 34 years old<br>
<input type="radio" name="Age" value="35-44">Between 35 and 44 years old<br>
<input type="radio" name=Age" value="45+">More than 45 years old
</dd>
<br>
<br>

We want to know their age so we will use radio buttons to limit their choice to just one selection. See a pattern yet? This will appear on your email as: "(age) 35-44".

Note: You will notice that you can use "normal" HTML tags along with the form tags. We used the list tags <DD> and break line tag <br> here to help the appearance of the form. You may use whatever tags you like, even add images and hyperlinks, to make your form appealing to your visitors.

<dt> 2) How often do you visit my page?</dt>
<dd>
<input type="radio" name="Visit" value="Daily">Every Day<br>
<input type="radio" name="Visit" value="Weekly">Once per week<br>
<input type="radio" name="Visit" value="Monthly">Once per month<br>
<input type="radio" name="Visit" value="Yearly">Once per year
</dd>
</dl>

Again, since we want to limit the choice, we use the radio buttons.

Let's Button this thing Up!

This will add your Submit and Reset buttons and name them Send and Clear.

This is where you specify the subject of the form. It won't appear as the subject of the E-mail you receive, but will appear in the body of the message. See the return E-mail example below.

(Name) GeoCities User
(Age) 35-44
(Visit) Monthly
(Subject) Survey Results
(next-url) http://www.geocities.com/membername/nextpage.html

<input type="hidden" name="next-url" value="http://www.geocities.com/membername/nextpage.html">
</form>

The text "next-url" must be lower case and remember the form must be closed off with the </FORM> tag.

Except where specifically noted, the name and value attribute contents can be either upper, lower, or mixed case.

This is where you specify the page that is shown after the user presses the "submit" button. For this example, let's call it "nextpage.html".

The "nextpage.html"

You need to design a HTML page called nextpage.html. You may decorate it any way you like and add any message you like. Special Note: Include a link back to your web site on this return page. The link must include the entire URL, not just the file name. Example: <A HREF="http://www.geocities.com/webtechu/index.html"> Home</A>. Make sure you save this file as nextpage.html.

Be sure to include the proper path to the page in your code. Since the page will reside in your own directory, the correct path will be "http://www.geocities.com/membername/filename.html". For example, if your membername is teacher1, and your file is called nextpage.html, you should refer to it as: VALUE="http://www.geocities.com/teacher1/nextpage.html".

Remember to correctly finish off the HTML page.

This is what it will look like.

Please fill out my Survey

Homework assignment:

You need to have your form completed and a return page set up. Please contact your instructor at this time and make sure to include the address of your homework.