您的位置：寻梦网首页＞编程乐园＞CGI编程＞Zhanshou's CGI Tutorial

HTML Forms

HTML forms enable us to create a simple and flexiable user interface to CGI programs with text fields, checkbox, menu and other useful tools. Constructing a form is less intimidating than it may appear at first. It works the same way as the ordinary HTML tags. If you've ever worked on any other HTML tags, you may find it's similar to form tag.

Form Example

Enter your Name:

Here's the HTML source code for the above form: 

 <FORM METHOD=POST ACTION="cgi-bin/hello.pl">
 Enter your Name:   <INPUT NAME="name" TYPE="TEXT" SIZE="20" MAXLENGTH="30">
 <INPUT TYPE="SUBMIT" VALUE="Send">     <INPUT TYPE="RESET">
 </FORM>

Let's take a close look at each of the elements of the form.

The FORM Tag

Format:

<FORM ACTION="url" METHOD=[POST| GET][ENCTYPE="..."]> ... </FORM>

The FORM tag defines the beginning and the end of a form. Although you can have multiple forms on one page, you can not nest forms.The FORM tag can have any of three attributes :ACTION, METHOD, and ENCTYPE. The attributes are as follows:

  • ACTION specifies the URL of the CGI application that will handle the form data. If this attribute is absent, the URL of the current document will be used.
  • METHOD specifies the method used to send the request. The valid values of METHOD are GET and POST. Where:
    • GET -- send the information to the server through an environment variable.
    • POST -- send the information to the server using standard input.
      Which method you use depends on how your particular server works. But NCSA recommends use of POST.
  • ENCTYPEis optional and is usually excluded. It is used to specify how the information from the form should be encoded by the browser. This attribute applies only to the POST method. All information passed via the GET method will be encoded in the standard way. The default MIME type for ENCTYPE is application/x-www-form-urlencoded, which is the standard encoding method for CGI.
Inside a FORM tag, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form. Here is the detail.

The INPUT Tag

Format:

<INPUT TYPE="..."[NAME="..."] [VALUE="..."] [SIZE="..."] [MAXLENGHT="..."] [SRC="..."] [CHECKED]>

The INPUT tag is used to specify a simple input element inside a FORM. It is a stand-alone tag; no </input> tag is required. It enables you to specify a number of different ways to input data. There are a number of different input types such as text, password, checkbox, radio, submit and reset. All input types except for submit and reset require a name as an identifier. Each of the types are described in detail below:

  • TYPE=TEXT

    An text entry field, which is the default TYPE. Here is an text field:

    Text :

    Here is the code: 

      Text :<input type=text name="fieldname" size="20" maxlenght="30">

    Which means that we create an text input type, the name is "fieldname", the text field length is 20, the number of characters you enter should be less than 30.

  • TYPE=PASSWORD

    Text entry field, the same as type=text except the entered characters are represented as asterisks. For example:
    Password :

    Here is the code: 

      Text :<input type=password name="passwdname" size="10" maxlength="10">

  • TYPE=CHECKBOX

    The checkbox type enables you to create a box that can be either on (checked) or off. If the box is checked, the associated name/value pair will be submitted. Look at this example:

    Which programming language do you know? (You can select more than one.):

    • C
    • Java
    • Pascal

    Here is the code: 

    Which programming language do you know? (You can select more than one.):
   <ul>
   <li><input type=checkbox name="language1" value="C">C 
   <li><input type=checkbox name="language2" value="Java">Java
   <li><input type=checkbox name="language3" value="Pascal">Pascal
   </ul>

    Here we create three checkboxs. They are named respectively "language1", "language2" and "language3". For example, if you check thethe first and the third boxes, and press the submit button, the data "language1=C" and "language3=Java" will be passed to the server.

  • TYPE=RADIO

    The radio button is similar to a checkbox. The difference is that if you specify multiple radio buttons with the same name, the user can check only one radio button. This example shows how radio buttons work:

    Which programming language is your favorite?

    • C
    • Java
    • Pascal

    Here is the code: 

    Which programming language is your favorite?
   <ul>
   <li><input type=radio name="language" value="C">C 
   <li><input type=radio name="language" value="Java">Java
   <li><input type=radio name="language" value="Pascal">Pascal
   </ul>

  • TYPE=SUBMIT

    Is a pushbutton that causes the current form to be sent to a remote server.

    Here is a submit button. (It is a dummy button which causes no action).

    Here is the code: 
       <input type=submit value="Submit anything">

  • TYPE=RESET

    Is a pushbutton that causes the various input elements in the form to be reset to their default value.

    This is a reset button:

    Here is the code: 

       <input type=reset value="Reset the value">

The SELECT Tag

Format:

<SELECT NAME="..." [SIZE="..."] [MULTIPLE]>
<OPTION [VALUE="..."] [SELECTED]>

The <select> tag enables you to create a menu of items. You can allow the user to select multiple items by using the attribute MULTIPLE. You can limit the displayed size of the list by using the SIZE tag; if the list is longer than the value of SIZE, the browser will usually include scroll bars. A select list of size 1 is generally displayed as a pull-down menu. If a SIZE isn't specified, a size of 1 is assumed.

The syntax of the <select> tag is similar to those of lists. Each list item is specified by the

With lists of size 1 (pull-down menu), one item is always selected by default. If you don't designate an option as selected, the first option is selected by default. However, with lists of size greater than 1, it is possible to have a <select> list with no options selected.

Look at this list:

Here is the code: 

 <select name="platform" size="1">
        <option selected value=""> Select your platform
        <option value="NT">Window NT
        <option value="95"> Window 95
        <option value="Ultrix">Ultrix
        <option value="AIX"> AIX
        <option value="MacOS">MacOS
 </select>

The TEXTAREA Tag

Format:

<TEXTAREA NAME = "..." ROWS = number COLS = number></TEXTAREA>

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

  • NAME is the symbolic name of the text entry field.
  • ROWS is the number of rows (vertical height in characters) of the text entry field.
  • COLS is the number of columns (horizontal width in characters) of the text entry field.
TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. Here we define a TEXTAREA with 4 rows and 40 cloumns:

Here is the code with no default contents: 

 <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>
If with default contents, the code should look like this: 
 <TEXTAREA NAME="foo" ROWS=4 COLS=40>     Default contents go here. </TEXTAREA>
Previous Page Table of Content Next Page