HTML forms enable information to be sent to a Web server which results in further action. That action can be the execution of program which sends information back to the browser or it might result in an email message being sent to a recipient named on the form.
Click here for a largish picture of the process (this is actually shown and explained in some more detail later).
In this paper we consider an example where a form is used to send a protein file name to a server where the molecular geometry of the protein will be calculated and returned to the browser for display as plain text. The HTML script which creates this form and the form itself are both shown below.
The form consists of a single text entry box in which a file name can be entered. You can type into the box the name of a file containing protein co-ordinates in Brookhaven format. Under the box is a button which, when clicked, sends the form back to the Web server.
When the server receives the form, it executes a script which extracts the file name from the form and passes it to a molecular geometry application which calculates bond lengths, bond angle, and torsion angles. We will describe what has to be written to carry out each of these steps.
First we will consider the HTML script below. The first four lines provide a heading for the Web page which will contain the form. The <p> means take a new line (remember that a browser will put new lines in where it thinks fit unless told otherwise!). The tag pairs <h1> and </h1> enclose headings with the numeral referring to the text size. <h1>hr</h1> creates a line across the Web page.
The form proper is enclosed between the two tags <form... > and </form>. Between these tags and two input tags. The first input tag introduces the line which constructs the text entry box for receiving the file name and the second tag constructs the button for submitting the form. Each box on a form is given a name. Our box is called "filename" and the text following its name is displayed beside the box. The name of the box is not displayed on the Web form.
Here is the HTML script that creates the form:
<p><hr><p>
<form method="POST" action="/cgi-bin/geom.pl">
<input name="filename"> File name of protein molecule<p>
<input type=submit value="Calculate geometry"><p>
</form>
The first form tag defines the method and the action to be associated with the form. The POST method tells the server that the information in the boxes will be sent to the server in a string of characters thus:
name1=value1&name2=value2&name3=.....
The names are the names of the boxes and the values are the text entered into the boxes. This string of text is sent to a program (known as a CGI program) on the server whose file name is specified in the action field of the form tag. This program, geom.pl, receives the string on its standard input. This way of communicating between the form and the program on the server which will process it, is know as the Common Gateway Interface (CGI). On my computer CGI programs are located in a subdirectory cgi-bin but this will depend on how your Web server is configured.
Here is the form that is generated by the above script:
The submit button with its associated text is created by the second input tag in the HTML script. Clicking on this button causes the transmission of the name=value string to the server which then activates the CGI program.
We suggest you read through the text first, before trying this out... !