Forms are the most common type of interaction between users and web applications, providing a much wider set of possibilities for user input than simple hypertext linking. HTML provides a set of components for collecting information from users, which HTTP then transmits to the server using your choice of methods. On the server side, your application processes the information sent from the form and generally replies to the user as you deem appropriate.
Creating the form is a simple matter of editing our original brochure to turn it into a form. We have to resist the temptation to fool around, making our script more and more beautiful. We just want to add four fields to capture the number of copies of each card the customer wants and, at the bottom, a field for the credit card number.
The catalog, now a form with the new lines marked:
<!-- NEW LINE - <explanation> -->
looks like this:
<html> <body> <FORM METHOD="POST" ACTION="cgi-bin/mycgi.cgi"> <!-- see text --> <h1> Welcome to Butterthlies Inc</h1> <h2>Summer Catalog</h2> <p> All our cards are available in packs of 20 at $2 a pack. There is a 10% discount if you order more than 100. </p> <hr> <p> Style 2315 <p align="center"> <img src="bench.jpg" alt="Picture of a bench"> <p align="center"> Be BOLD on the bench <p>How many packs of 20 do you want? <INPUT NAME="2315_order" > <!-- new line --> <hr> <p> Style 2316 <p align="center"> <img src="hen.jpg" alt="Picture of a hencoop like a pagoda"> <p align="center"> Get SCRAMBLED in the henhouse <p>How many packs of 20 do you want? <INPUT NAME="2316_order" > <HR> <p> Style 2317 <p align="center"> <img src="tree.jpg" alt="Very nice picture of tree"> <p align="center"> Get HIGH in the treehouse <p>How many packs of 20 do you want? <INPUT NAME="2317_order"> <!-- new line --> <hr> <p> Style 2318 <p align="center"> <img src="bath.jpg" alt="Rather puzzling picture of a batchtub"> <p align="center"> Get DIRTY in the bath <p>How many packs of 20 do you want? <INPUT NAME="2318_order"> <!-- new line --> <hr> <p> Which Credit Card are you using? <ol> <li>Access <INPUT NAME="card_type" TYPE="checkbox" VALUE="Access"> <li>Amex <INPUT NAME="card_type" TYPE="checkbox" VALUE="Amex"> <li>MasterCard <INPUT NAME="card_type" TYPE="checkbox" VALUE="MasterCard"> </ol> <p>Your card number? <INPUT NAME="card_num" SIZE=20> <!-- new line --> <hr> <p align=right> Postcards designed by Harriet@alart.demon.co.uk <hr> <br> Butterthlies Inc, Hopeful City, Nevada, 99999 </br> <p><INPUT TYPE="submit"><INPUT TYPE="reset"> <!-- new line --> </FORM> </body> </html>
This is all pretty straightforward stuff, except perhaps for the line:
<FORM METHOD="POST" ACTION="/cgi-bin/mycgi.cgi">
which on Windows might look like this:
<FORM METHOD="POST" ACTION="mycgi.bat">
The tag <FORM> introduces the form; at the
bottom, </FORM> ends it. The
METHOD attribute tells Apache how to return the
data to the CGI script we are going to write, in this case using
POST.
In the Unix case, the ACTION attribute tells
Apache to use the URL cgi-bin/mycgi.cgi (which the server may
internally expand to /usr/www/cgi-bin/mycgi.cgi, depending on server configuration) to do something
about it all:
It would be good if we wrote perfect HTML, which this is not. Although most browsers allow some slack in the syntax, they don’t all allow the same slack in the same places. If you write HTML that deviates from the standard, you have to expect that your pages will behave oddly somewhere, sometime. To make sure you have not done so, you can submit your pages to a validator — for instance, http://validator.w3.org.
For more information on the many HTML features used to create forms, see HTML & XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy (O’Reilly, 2002).