Working with HTML Forms

by Donald W. Hyatt

HTML Forms are very powerful because they can collect data from the Internet and use that information in other web pages. The data that is collected can be processed in several ways including CGI scripts written in Perl or C, and also with a newer language called PHP code. The example showing how to process data collected from a form will be written in PHP since it is easier to follow what is happening, and PHP is my most favorite language right now, even better than Perl!

Some Common Tags used for HTML Forms

First, lets take a look at some of the basic tags related to forms:
Opening Tag Meaning   Closing Tag Meaning
<FORM> Start of a Form       </FORM> End the Form
  (Required: ACTION ="file"  METHOD = "post"     Calls "file" when submitted, sending data via "post")
 
<SELECT NAME = "var"> Start of Selection List       </SELECT> End of Selection List
<OPTION> Start of Option (one can be SELECTED)       </OPTION> End of Option
<TEXTAREA> Start of a Text Input Area       </TEXTAREA> End of Text Area

Common Input Methods
<INPUT  TYPE = "text" NAME = "var" > Input Text Area, can also specify SIZE, MAXLENGTH, and VALUE
<INPUT  TYPE = "radio" NAME = "var" VALUE = "txt"> On/off radio button, only one option with same NAME allowed.
<INPUT  TYPE = "checkbox" NAME = "var" VALUE ="txt" > Input multiple options, only checked items sent
<INPUT  TYPE = "password" NAME = "var" > Text Input but characters are not displayed. Data is not encrypted.
<INPUT  TYPE = "hidden" NAME = "var" VALUE = "txt" > Method used to pass data to server that is not displayed on form.
<INPUT  TYPE = "file" ACCEPT = "type" NAME = "var" > Allow users to upload files of certain type. Accompanied by "browse" feature.
<INPUT  TYPE = "submit" VALUE = "label" > Sends data to file specified in "ACTION" field of FORM tag.
<INPUT  TYPE = "reset" VALUE = "label" > Clears all form data and restores initial values  

A Simple Form Program

The following program uses just a few features of an HTML Form, but it should give you an idea of how things work. THis program will call a PHP program that uses the two variables sent to it, the name of the "student" and the "grade" that was selected. 
       <HTML>
       <BODY BGCOLOR = "#FFFFFF">
       <H1> A Simple Form </H1>
       <FORM ACTION = "process1.php3" METHOD = "post">
       Enter Your Name:
       <INPUT TYPE = "text" NAME = "student"> <BR>
       Select Your Grade Level: 
       <SELECT NAME = "grade"> 
       <OPTION SELECTED > 12
       <OPTION> 11
       <OPTION> 10
       <OPTION> 9
       </SELECT> <BR>
       <INPUT TYPE="submit" VALUE = "Submit">
       <INPUT TYPE="reset" VALUE = "Clear">
       </BODY>
       </HTML>

Processing the Form

In most cases, processing the form requires another HTML or CGI program that will use the data that has been entered. CGI programs are often written in Perl, and have to reside in another directory called cgi-bin that is a subdirectory off of web-docs. For this example, though, we will use a new and very simple language called PHP, which is just an enhancement to HTML.

The web server needs to recognize that there are PHP enhancements to an HTML file, so the extender at the end of the filename is ".php3" instead of ".html" as we have had before. The specialized PHP code is inserted between two new tags, "<?" and "?>". Within those tags, the values of any variables passed to the web page from the form are easily accessed.

Notice that the variable names are the same as defined in the form, but are preceded by a dollar sign ($). In fact all scalar type variables in PHP are preceeded by a dollar sign, which is very similar to Perl. For instance in the simple program form1.html , the INPUT TEXT variable was called "student", so we can now refernce the value entered by the use with the PHP variable "$student". The SELECT variable had a name "grade", so we now reference the value selected as "$grade". There is also a simple calculation using a new variable "$graduate" that figures out when that student will graduate. The calculation we make is like code very similar to standard programming languages like C or C++. In fact, most standard programming constructs found in C++ exist in PHP, too.

For the web browser to display anything while in the PHP portion of the document, the information must be included as part of a print statement. This includes any HTML tags desired for formatting purposes. Take a look at the simple PHP program below that processes the data sent by the form program, and then run the program to actually see it work. 

       <HTML>
       <BODY BGCOLOR = "#FFFFFF">
       <H1> Processing the Form </H1>
       <?
         print("Hi $student! <BR>");
         print("You are in grade $grade. <BR>");
         $graduate = 2001 + (12 - $grade);
         print("You will graduate in the year $graduate.");
       ?>
       </BODY>
       </HTML>

Watch the Program Run

Source Code for the FORM program:
form1.html
Source Code for the PHP program:
process1.php3
Actually watch things run:
See it run

More Examples