Web Development HTML Guide - Learn HTML
Developer Tutorials
ASP
CGI & Perl
CSS
Flash
HTML
Java
JavaScript
Linux
MySQL
PHP
Photoshop
Python
Wireless
XML



Developer Manuals
Learn HTML
Learn PHP
Learn MySQL
Learn CSS
Learn Pear


Developer Scripts
ASP Scripts
ASP.NET Scripts
CGI & Perl Scripts
Flash Scripts
Java Scripts
JavaScript Scripts
PHP Scripts
Python Scripts
Remotely Hosted Scripts
Tools & Utilities Scripts
XML Scripts

Developer Resources
Developer Tools
Developer News
Developer Forums
Developer Content
Developer Book Reviews
Survey Software

Web Hosting Directory
Budget Web Hosting
ColdFusion Hosting
Dedicated Servers
Domain Hosting
E-Commerce Hosting
Email Hosting
Free Web Hosting
Linux Web Hosting
Managed Hosting
Reseller Hosting
Small Business Hosting
Windows Web Hosting

Forms and CGI

The original and still most popular use for forms is in conjunction with CGI (Common Gateway Interface). In the CGI way of doing things, the data the user enters is sent to the web server, where a program processes the data and returns the results. In other words, all the data is processed on the server, not in the web browser.

Let's expand our earlier example to show how to incorporate CGI:

<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT name="favecolor">
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

which gives us

favorite color:

Here's what the new pieces mean:

<FORM ACTION="/cgi-bin/mycgi.pl">
ACTION tells the browser where to send the data for processing (more on that shortly). ACTION is required with every form, even forms that don't use CGI.

<INPUT name="favecolor">
We've added the NAME attribute. NAME identifies each field, "names" it so it can be referred to later.

<INPUT TYPE=SUBMIT VALUE="Submit">
This <INPUT ...> tag creates the "submit" button, which the user presses to send the form to the web server.

That's the basic set up for a CGI form, but what happens after the user presses Submit? Consider, for example, this simple form:

Join our mailing list

Name:
E-mail:

Here's the chain of events when the user hits "Submit":

diagram of the CGI process
  1. When the user presses Submit, the browser sends the form data to the web server.
  2. The web server launches the CGI program which was written to process this form.
  3. The CGI program does whatever it does with the data. The program might consult a database, perform calculations on the data, use the data to add the user to a mailing list, whatever the programmer wants it to do. Whatever else the program does, it generates a web page using HTML so the user can see the results of submitting the form.
  4. The CGI program passes the HTML back to the web server.
  5. The web server passes the HTML back to the browser.

So there are three pieces to the CGI process: the form on your web page, the web server, and the CGI program. This guide deals with the first part: how to use HTML to make a form. Your web administrator handles the web server, and for a good guide on how to write CGIs, we recommend James Marshall's excellent (and short) CGI Made Really Easy.

NOTE: If you want to get started writing HTML forms but don't have a CGI set up yet, you can use our publicly available CGI at ../cgi-bin/mycgi.pl. This CGI will produce a web page of all the fields sent to it, so you can see if the forms work the way you intended. Most of the forms on the rest of this page will use this CGI.

Technically speaking there is no such thing as "a CGI". "CGI" is a standard protocol, not an actual implementation. However, it has become common to refer to a program which uses the CGI standard as "a CGI", and we will follow that custom here.

One of the reasons CGI is so popular is that the CGI program can be written in just about any programming language: C, C++, Perl (the most popular language for CGI), Visual Basic, etc. CGI was designed to allow great flexibility in processing the form data, while still allowing the results to be returned as HTML (or other formats, but HTML is the most popular).


Copyright Idocs, Inc. Written by Miko Sullivan











About the NetVisits, Inc Network | Advertise
Developer Tutorials hosted by HostGator.
Copyright ©2007 NetVisits, Inc Network. All Rights Reserved. Privacy Policy.
Visit other NetVisits, Inc. sites: