CGI-Programming

HTML forms

The FORM tag

A web form is usually part of a larger HTML page. The form part is enclosed by FORM tags, as the following: 
<FORM METHOD="post" ACTION="....">
...
</FORM>
The METHOD attribute is usually "post" and ACTION contains the URL of the CGI-program that processes the arguments delivered by the form.

The INPUT tag

Example: 
First Name:<INPUT TYPE="text" NAME="fn" SIZE=30 MAXLENGTH=100> <BR>
Last Name: <INPUT TYPE="text" NAME="ln" SIZE=30 MAXLENGTH=100> <BR>
Phone no.: <INPUT TYPE="text" NAME="ph" SIZE=10 MAXLENGTH=50>  <BR>
An INPUT tag (no closing tag required) of TYPE "text" will draw a box into which text can be entered. This text will be delivered as a value to the CGI-program, whose name is the string specified in the NAME attribute of the INPUT tag.

The TYPE attribute indicates the type of form element to display. Type "text" will display a one-line text box. This is the default type, meaning that it can actually be omitted. Other possible types are checkbox, radio and others, which will be shown later.

The SIZE attribute indicates the width, in characters, of the displayed text field.

The MAXLENGTH attribute indicates the number of characters that a user is allowed to type into the text field.

Note that a descriptive text (in this case, "First Name:", "Last Name:", "Phone no.:") is written next to the text boxes, in order for the user to know what type of information to enter in each of them.

The submit and reset buttons

Each form should include a submit button. When the user clicks this button, all name-value pairs generated by the form are delivered to the CGI-program, which is then executed.

The submit button is indicated by an INPUT tag of TYPE "submit". The VALUE attribute specifies the text to be written inside the submit button. (when omitted, the default label "Submit Query" will be written.) 

<INPUT TYPE=submit VALUE="Send Form">
It is recommended to include also a reset button, which clears all entries on the form and allows user to start over again.

The reset button is formed by an INPUT tag in which TYPE is "reset" and VALUE is the text to be written inside the button (default is "Reset"). 

<INPUT TYPE=reset VALUE="Reset (clear all entries)">

Additional form elements

The next slide shows an HTML form containing many other form elements. Look at the HTML source of that slide to see the underlying form tags. Read more about these tags in the HTML 3.2 Specifications.

Table of Contents.
Next.