In this lesson we will be creating a simple form.
It might help to print out the source code for the form, tlform.html. This form includes some JavaScript in the <head></head> container used for client-side error checking. You can ignore that for purposes of this lecture, or study it after you have mastered the basic structure of an HTML form.
Data Collection. Forms perform two functions -- gathering information from the user, and storing the information. Our form will gather the information and transmit the information (data) using the CGI (Common Gateway Interface) protocol to a PERL script program which will store the information in the cgi-bin folder on your web4students College server.
Server Functions, CGI Security, and FTP/URL AddressesThe web4students server is reserved for executing CGI/PERL scripts. CGI PERL scripts can raise a number of security problems, so the College IT department has isolated this server for our use so that any hacker attack on our CGI/PERL executable files will not infect the College's other WWW servers.
Therefore, the FTP host name for uploading to this server is not www.montgomerycollege.edu. The WWW server is a separate server. Your FTP host address is web4students.montgomerycollege.edu. The structure of this host URL name is:
URL addresses use "dot separator syntax" (the period character is the "reserved character") to separate the alpha-numeric strings in the URL address.
The <form></form> tag pair. In creating the form, we need to code in the form's controls, and design an appropriate layout. All forms begin with the <form> tag and end with a </form> tag. The individual controls inside the form reside inside the FORM container. To see an example of what we're creating click on the "Form Code" button at the top of this page.
Form Controls. Form Controls include:
The controls are used and best suited to capture different types of information.
Input Controls Within Forms. Input controls begin with the opening element INPUT, and are followed by the Attribute TYPE="", followed by the "type" of input control, i.e. "text", "checkbox", "radio", and "command". Here's an example of each:
Text Input To create a text input box the tag would read "INPUT TYPE=TEXT" name = "some_name" size = "some_number". The name must be unique for each text control and the size indicates how many characters wide the box should be (typically less than 80). This control will then return whatever the user has typed in to the server matched with the name assigned to that text box.
Name Matching. Name matching will match the name of the form with the corresponding value assigned to the control. Every type of data being returned to the server is sent as a match of the name of the control and the value assigned to that control. This name value matching will be used in the next assignment when we create CGI scripts that process the data based on each control name and the information sent by the user.
So, as you go through the example, note that each INPUT box, or each TEXTAREA or SELECT box which collects information uses the NAME attribute. That is, each related collection of information (a group of radio buttons listing pizza toppings, for instance) will have a unique name. This NAME will correspond to a VALUE name (also known as a "Variable" which will appear in the PERL script we use next week. We introduce the concept of Name Matching here, so you know why we use the NAME attribute. Next week, we'll work on matching up the variable NAME of each form input with the variable VALUE in the PERL script.
Text boxes are useful for short pieces of information like a user's name address, city state zip or other types of information that is limited in the nature. For comment fields that may run rather long the preferred input type is "textarea" and that will be discussed later.
Checkbox. A check box lets the user check more than one among many options, and transmits all the information to the server. The tag is created by typing "INPUT TYPE=CHECKBOX" name = some_name value = some_value. For example "INPUT TYPE="CHECKBOX NAME ="fruit" VALUE ="Banana." If the user checks the "banana" box, the string "banana" will be sent to the server, to be stored in the PERL script variable named "Fruit".
Each group of checkboxes affiliated with the same list must share the same Attribute name (i.e., "Heroes" or "Fruit") identify that these are all selections from the same group. What will be returned is the name of the control and all of the values listed with a comma separating each value.
Radio Buttons The third type of input is a radio button. The Radio button is created with the command "INPUT TYPE=RADIO" name = some_name value = some_value. As with checkboxes, the names must all be the same to indicate all of these radio buttons refer to the same list. A group of radio buttons with the same NAME attribute will only allow you to select one option on the list rather than the checkbox's multiple options.
The CHECKED Attribute - Radio Buttons and Checkboxes. For both radio and check boxes it is possible to place the word "CHECKED" following one or more options. The Attribute "CHECKED" selects by default that button or those boxes. The return value of a radio button will be the name of the control and the single value that was selected from the list.
Command Buttons. The last "input type" to be discussed is command buttons. The two buttons we will discuss are of type "SUBMIT" and of type "RESET". The "SUBMIT" button causes the entire form to be sent to the location listed in the form tag. At this point we have not listed anything in the form tag so it will not do anything except give you an error message.
The single attribute that can be set is a value and that would be set equal to whatever you want to appear on the face of the button. The "RESET" button also has a value attribute and is whatever you want to have said on the face of the button. Reset will clear the form and return the controls to any default settings.
Select Option. Two other types of controls that are not specifically of type "INPUT" are the "select-options" and "textarea". The select-options will create a drop down box and within the dropped down box allow you to select one of those choices.
First, type the "Select" container tag, which consists of "<SELECT NAME=Name_of_Control"> , and ends with a </SELECT> closing tag. Then within the tags, type the various OPTION tags, <OPTION VALUE ="Nirvana" SELECTED>Nirvana with the label for the Option outside the tag.
The OPTION tags appear inside the SELECT container tag. Each option has a value and following the value would be the text to appear in the drop down box. It is possible to indicate one option as selected and that will make it the default value for the drop down box. (This tag makes more sense when you look at the example.)
TextArea. Another data input is textarea. Textarea begins with the "TEXTAREA" tag and ends with a "/TEXTAREA" tag. Within the textarea tag the options are name=some_name rows=some_number columns=some_number and wrap. Rows and columns indicate the number of characters wide and the number of rows deep to create the input box. Wrap indicates if the box should allow text wrapping so that if the user reaches the end of the box it will word-wrap down to the next line.
Create an interactive form which will collect user information on your web4students server account. There are two basic steps to this process.
Creating the Form. First, create the form with input boxes. These input boxes should create "variables" in Random Access Memory (RAM) using the "name" and "id" attributes. You should read the follow-up essays, CGI/PERL Essays, so that the variables you create match the Perl script we have provided for your use in this exercise.
Upload this form and the corresponding files for your final project web site, due the Monday following your lab at 12:00 Noon. You will have the Saturday lab to work on the form with our Lab Instructor.