MFL 195 - Integrating Technology
into Foreign Language Education

Interactive Forms

As you saw in the examples we looked at last week in Web-Based Activities for Foreign Languages, interactive forms are very useful. In the exercise below, we will create a simple survey using a form.

There are basically five types of form entries you can put on a web page: a text box (in which the individual types in a one-line response), a text area box, which allows for longer written responses, a radio button (for multiple choice questions for which only one answer is correct), check boxes (for questions to which there may be more than one answer possible), and drop boxes from which the reader chooses the response from a list of preselected entries. Our survey will include one of each so you can see how they are done.

To begin, go into Notepad and start a new web page in the usual way:

Next, you will need to insert the following code. I will explain in a minute what all this gobbeldy-gook is:

<FORM METHOD="post" ACTION="http://www.furman.edu/cgi-bin/FormMail.pl"><br>
<input type=hidden name="recipient" value="firstname.lastname@furman.edu"><br>
    (NOTE: Insert your own Furman e-mail address after the word "value".)
<input type=hidden name="subject" value="Survey"><br>
<input type=hidden name="sort" value="order:name,language,countries,wish,comments"><br>
<p>

The first line of this command did three things:

  1. FORM told the computer a form was starting.
  2. Then it told the computer that the METHOD of dealing with the form was to POST it.
  3. Finally, the ACTION the computer should take is to run the data through a cgi (Common Gateway Interface) script that resides on the Furman web server so that the data will be returned to you in some sort of intelligible form.

    In lines two through four of the code above, all begin with input type=hidden. Normally, the command INPUT will imply some action on the reader's part (type in a box, check a box, etc.), but in this case the action is going on behind the scenes and will be taken care of by the cgi script. In line two, you are announcing that you want the form sent to your e-mail address. In line three, you are telling the computer that when the results are returned to you, the heading you want on the page is Survey. The last line tells the computer in what order to report the data to you. Our form will contain a text box for the person's name (hence, "name"), a series of radio buttons for choosing the individual's native language (hence, the "name" of this item is "language"), a series of check boxes for the reader to indicate what countries he or she has already visited (check boxes, since there may well be more than one possible answer; and the name we're going to give to this item is "countries"), a drop box from which the student may choose the one country she would most like to visit (hence, the name "wish"), and finally a text area for the student to add any comments (name = "comments"). When the data comes back to you in your e-mail message, it will look like this:

    Whew! That was a rather long-winded explanation for something that is relatively simple. Let's move on.

    Adding a Text Box

    The first question we want to ask is the person's name and then provide a space for the reader to type in his name. This is accomplished with a text box, a long box that allows for only one line of text. It might look something like this: (Go ahead and click your cursor in the box, then type in your name to see how it works).

    Here's what produced the box above:

    Adding Radio Buttons

    Next, we want to find out what the student's native language is. Since there is only one correct answer possible, we will use radio buttons. Radio buttons are mutually exlusive. That is, if you click one circle, it blackens. If you click on another, the first one disappears. Want to try it? Here are two radio buttons. Go ahead -- click on them -- see what happens.

    -

    OK, here's the code you need for your form:

    And now for the explanation. INPUT tells the form that a form item is coming. The TYPE of item is a radio button, hence "radio". NAME refers to the category as it will be reported back to you in your e-mail. In this case, the category is "language". VALUE is the name assigned to each possible response.

    Adding Check Boxes

    OK, now we're ready for our third trick--check boxes. We want to use check boxes when more than one answer is possible. When the reader clicks on a box, it is possible to click on another without eliminating the first choice. What to try it? Here are some check boxes -- check more than one:

    If you accidentally check a box you don't mean to check, you can simply click on it again to make the X disappear.

    Here's the source code you'll need for this question:

    3. What countries have you already visited?<br>
    <input type="checkbox" name="countries" value="England">England<br>
    <input type="checkbox" name="countries" value="France">France<br>
    <input type="checkbox" name="countries" value="Spain">Spain<br>
    <input type="checkbox" name="countries" value="Mexico">Mexico<br>
    <input type="checkbox" name="countries" value="Senegal">Senegal<br>
    <input type="checkbox" name="countries" value="Canada">Canada<br>
    <input type="checkbox" name="countries" value="None of the above>None of the above<br>
    <p>

    Adding a Drop Box

    The fourth type of form item is a drop box. It is generally used when there is a long list of choices, but only one answer is correct. For example if you wanted readers to indicate what state they lived in, you might supply a list of all 50 states for them to choose from. I tend not to use drop boxes very often. In the example I just gave, I see no reason not to use a text box in which they could simply type in their state. However, for the sake of the exercise, let's do a drop box.

    First, an example. Let's say I wanted to find out at what level you teach. I might give you a drop box. To open it, click on the small down arrow in the gray box on the right. Then highlight and click on the appropriate box.

    Ok, here's the source code for our drop box:

    SELECT tells the computer that a drop box is coming. NAME once again indicates the category of the question as it will be reported on your e-mail response form. It will say WISH: Senegal when it arrives in your e-mail. The SIZE indicates how many items will be visible in the drop box. I think this is silly. If more than one item is visible, it defeats the purpose of the box. Still, you need it, so put it in! OPTION SELECTED indicates the item that will appear in the box to start out with. In the example above, "Pre-School" is visible. OPTION denotes another choice in the list. And finally, /SELECT turns off the drop box. There now, that wasn't so bad, was it?

    Text Area Box

    Let's add a text area box for comments. This item is similar to a text box, except that we want it to be more than just one line in case someone decides to get real chatty. A text area box looks like this:

    The source code for our text area box looks like this:

    This time, we begin our command a bit differently. Instead of INPUT, we begin with TEXTAREA. The name we give this item is "comments". Then we designate the size of the text area box by giving the number of ROWS (4) and Columns (COLS=50). Note that for text area boxes, we must include a command to turn them off: </textarea>, unlike the one-line text box which did not need this command.

    Submit and Reset Buttons

    Now you need some way for the person who has filled out your form to send it to you. We'll do this with "SEND" and "RESET" buttons at the bottom of our form. (Please do not click on these - they are active. If you do, my mailbox will fill up with junk mail and I will be very grumpy!). They look like this:

    The source code for these buttons is a snap:

    INPUT tells the computer a form item is about to appear. TYPE tells it what kind of item it is. In this case, it is a submit item (in other words, e-mail this to me). The VALUE denotes the word you actually want to appear on the button, be it "mail," "send," "submit," "envoyer," or whatever. When you click on this button, the form will perform the ACTION you put into the original FORM command, ie, "post" or mail. In the second code, the TYPE is "reset." Clicking on this button will erase all the answers entered and allow the individual to start over.

    Let's Finish This Puppy

    One last item and we're done. We have three codes to close out to complete our page:

    If you want to see what your form should look like when it is completed, click here.

    Patricia L. Pecoy
    MFL 195
    This page was last updated on July 12, 1997