Most web servers have a "cgi-bin" directory in the httpd root directory which contains utilities that support hit-counters, forms and some other interactive features. CGI stands for "Common Gateway Interface." These utilities are typically written in Perl, although they can be written in any number of other languages.
Here we demonstrate some common CGI-bin functions that parse web form data. Since CGI-bin utilities are server-specific, you should ask your ISP server administrator which cgi-bin utilities are provided before investing a lot of time writing pages that depend on ones the server doesn't support.
Forms
You can use web forms to collect information from people visiting your page, and have the data sent to you in an e-mail, or else have a CGI-bin utility parse and append the data to a file in your web directory. Web forms are the foundation of e-commerce.
First create an empty file to receive form data in your webserver directory (public_html or whatever), and make it world-writeable, e.g.:
> touch formdata.db
> chmod 666 formdata.db
Now create the web page with the form your visitors will fill out. In the <FORM> tag, set the METHOD to "POST" and ACTION to the path for the guestbook script "/cgi-bin/guestbook" concatenated with the path to your guestbook file "~yourusername/formdata.db", e.g.:
<FORM METHOD=POST
ACTION="http://www.udel.edu/cgi-bin/guestbook/mad_dog/guestbook.db">
This has the server's cgi-bin guestbook utility add the new data at the end of the specified guestbook file. Alternately, to have the form data sent to you via e-mail, use a "mailto" ACTION in the FORM tag such as:
<FORM METHOD=POST
ACTION="mailto:johnmack@udel.edu?subject=response to
form" ENCTYPE="text/plain">
Now add the form elements you want:
TEXT boxes are for single-line text input. The NAME="fieldname" attribute is the field identifier; VALUE="default entry" is the default entry, which is often "" (blank);. SIZE=n specifies width of the box is n characters; MAXLENGTH=m specifies a maximum of m characters can be entered. The text box sends the server a single name=value line.
<INPUT TYPE="text" NAME="Name" SIZE=30 VALUE="">
PASSWORD boxes work the same as text boxes, only the characters the user enters echo to the screen as asterisks ***. The entered data are not encrypted when sent to the server, however. The password box sends the server a single name=value line.
<INPUT TYPE="password" NAME="nickname" size=30 Value="">
TEXTAREA boxes are for multi-line text input. Attributes are NAME="fieldname"; ROWS=n COLS=m sizes the box to n lines of m characters; the optional WRAP lets user entry lines wrap within the box margin. Scrollbars appear when needed. A closing </TEXTAREA> tag is required; you can include default text between the two tags. The box sends the server a single name=long text line with the multiple input lines separated by \n (newline) characters.
<TEXTAREA NAME="COMMENTS" ROWS=5 COLS=50>default text here</TEXTAREA>
RADIO buttons are for mutually exclusive choices: if you click one, it clears all the others. Attributes are NAME="buttonset "VALUE="choicevalue"; you can set one button as CHECKED by default. A set of radio buttons all use the same NAME but have different VALUEs. The choice sends the server a single name=value line
<INPUT TYPE="radio" NAME="drill" VALUE="B&D">
CHECKBOX buttons allow multiple selections, so each checkbox should have a unique NAME. A uniform VALUE identifies the set of checkboxes. You can specify one or more boxes as CHECKED by default. A set of checkboxes sends multiple name=value lines--one for each box checked.
<INPUT TYPE="checkbox" NAME="laughing gas" VALUE="anesthetic">
MENU boxes contain option lists. The SIZE=n attribute specifies the size of the box in text lines; the user scrolls down to see additional options. The MULTIPLE attribute allows the user to choose more than one option. The <MENU> tags contain an <OPTION> tag for each option. You can specify one or more options as SELECTED by default.
<SELECT NAME="Service" SIZE=4>
<OPTION VALUE="trepan" SELECTED>Traditional
Trepan
...
</SELECT>
The SUBMIT button sends the current form data to the server or e-mails it to you.
<INPUT TYPE="SUBMIT" VALUE="Send It!" onClick="alert('Thanks for the info!')">
Or you could include an image or text BUTTON to submit the form:
<BUTTON TYPE="submit" NAME="submit" VALUE="submit">
<IMG
SRC="submit_button.gif"></BUTTON>
Finally, your form should probably include a RESET button that restores it to its default state:
<INPUT TYPE="RESET" VALUE="Clear Form">
Here's the code that creates the form shown below. I used a table
to get a nicer form layout.
| <TABLE width="100%" border=0 cellspacing=0 cellpadding=4 BGCOLOR="#FFFFCC">
<tr><td align="right" valign="top"><FORM METHOD=POST ACTION="http://www.udel.edu/cgi-bin/guestbook/johnmack/mad_dog/formdata.db"> Your Name:</TD>
<tr><td align=right valign="top">Your secret <b>nickname</b>:</td>
<tr><td align="right" valign="top">Please enter your
<tr><td align="right" valign="top">What kind of <b>drill</b><br>do
you prefer most?<br>(select one)</td>
<tr><td align="right" valign="top">What kind(s) of <b>anesthesia</b><br>do
you enjoy?
<tr><td align="RIGHT" valign="top">Which of these<br><b><font
color="#CC0000">Mad Dog's Trepanning Parlor</font><br>services</b>
are you interested in?
<TR><TD> </TD>
|
And here's the result:
| Your E-mail: | |
| Your secret nickname: | |
| Please enter your
favorite limerick here: |
|
| What kind of drill
do you prefer most? (select one) |
Black & Decker 1/2"
VSR
Makita 3/4" pneumatic (Mad Dog's favorite!) Sears Craftsman 3/8" VSR traditional augur (manual brace) |
| What kind(s) of anesthesia
do you enjoy? (select one or more) |
Nitrous
Oxide
Morphine Jim Beam None, I enjoy pain |
| Which of these
Mad Dog's Trepanning Parlor services are you interested in? (select one) |
|
After you fill out the form and submit it...
Each submission is terminated by a special string such as "##." The multiple input lines from the TEXTAREA box are sent as a single string with \n newline characters included. Note that the field order in formdata.dbis not the same as the form element order on the page.
If you want to dig further into CGI, there are lots of sites that share scripts. Popular ones include clock displays, random image displays, form mail, web-based bulletin boards, keyword searchers, etc. Here are some good starting points: