Forms are a nice way of getting input for programs over the web using HTML. As we mentioned earlier, Unix processes don't really care where they get their input from, so it is not much different to get information from HTML forms in a web browser.
A form entry can be thought of in programming terms as a variable. It has a name, and a value. The value can be changed at any time and set to anything we want. When writing simple programs, usually something like this is done:
print What is your name?;
input NAME;
This simple program part gets the required information from the user that is used later in the program. Using this method, the user has to answer every question, can only enter the information once, and must do it in a specified order. Forms, on the other hand, list all the variables that a program needs and allows the user to fill them in in any order, making corrections as they go. When the user is finished, they click submit, which takes all of the data and sends it to the server, and then to the program that needs that data.
The syntax for a form consists of 3 parts. The first signals the browser that this is a form and to send the information to the proper URL:
<FORM METHOD=POST ACTION=http://server-name/cgi-bin/progrm-name>
The second is the input tags. This is where you declare your variable names. The browser draws them as boxes. You can optionally specify the VALUE attribute to assign an initial value, which will appear in the box. If it is not there, the box will be blank.
Enter your name: <INPUT NAME=variable-name VALUE=initial-value>
Each INPUT item is a variable that has a name assigned to it using the NAME attribute. Each INPUT variable will have a value. By default they are empty, unless assigned something using VALUE. When the user clicks on the SUBMIT button, whatever text is in the box will be the value of the variable.
Variables have names, but they also need to have something associated with them that allow humans to recognize what it is asking for. The text beside the is called a Label. It has nothing to do with the way the form works, and it will not be sent to the server. It is there in the HTML to give the user a clue about what to enter into the box. When the HTML is rendered, the text appears right before the box. The label can be in front of or after the input box--it's whatever looks better.
Finally, you need a submit button that tells the browser that the user is finished entering information, and it will package the data up and send it to the specified URL. Whatever is in the NAME attribute will be what is shown on the button. The TYPE attribute alerts the browser how to display the input. For submit and reset, the browser draws them as buttons. Reset clears the form to its original values. You then finish the form with an end tag.
<INPUT TYPE=submit VALUE="Submit This Form">
<INPUT TYPE=reset VALUE="Reset This Form">
</FORM>
This gives you the basics of creating a simple form. There are other more advanced features that use the TYPE attribute. These are just other ways of getting input and are treated the exact same as other input methods as far as variable names and values are concerned. What is different is how the browser draws them and how the user interacts with them. Some of them are:
Check Box
<INPUT TYPE="checkbox" NAME="pickle" VALUE="yes">
This input variable, pickle, will contain the value "yes" if it is checked. It will not contain anything if it is not checked. So if your form is for ordering lunch, the variable "pickle" will only contain "yes" if the user checked it.
Radio
<INPUT TYPE="radio" NAME="bread" VALUE="wheat" SELECTED >Wheat<BR> <INPUT TYPE="radio" NAME="bread" VALUE="white">White<BR> <INPUT TYPE="radio" NAME="bread" VALUE="rye">Rye<BR> <INPUT TYPE="radio" NAME="bread" VALUE="pumpernikel">Pumpernikel<BR>
Notice here that all 4 variable have the same name. This is because radio buttons are group items. Only one value may be selected at a time. Whichever item is selected will be the value of the variable. The default item selected here is Wheat, by using the SELECTED attribute
Pulldown Menus
Another way to accomplish the same task as a radio button is to use a pulldown menu. This is usually good if there are a lot of options to select from. It uses this syntax:
<SELECT NAME="meat"> <OPTION SELECTED>Turkey <OPTION>Ham <OPTION>Roast Beef <OPTION>Bologna <OPTION>Pepperoni <OPTION>MeatBall <OPTION>Chicken </SELECT>
Text Area
If you want to allow the user to type in a lot of text that will span multiple lines, use the TEXTAREA:
<TEXTAREA NAME="comments"> Blah Blah Blah Blah Blah </TEXTAREA>
Hidden Fields
A common trick to send extra information to the server without it showing up in the form is to use the HIDDEN attribute. It will not be drawn in the html page, but it will act just like any other input item. You can use it for a value that does not change, or one you don't want people to edit.
<INPUT TYPE="HIDDEN" NAME="storeNum" VALUE="230432">