![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
![]() |
![]() |
To access the contents, click the chapter and section titles.
Perl CGl Programming: No experience required.
Skill 6
|
A Very Good Quiz Form Example
The IQ test at www.streetside.com/cgi-bin/PSPoll.cgi is one of the best examples of a quiz form that you will find anywhere. In fact, if you run a business that allows employees access to the World Wide Web, it would probably be best if you kept this URL a secretits easy to waste a lot of time trying to beat this test. If your HTML skills are a little rusty, remember that you can look at the source code for this document and even download it. In Netscapes Navigator browser, the View menu has a Document Source option that brings the HTML code to the screen. Microsofts Internet Explorer browser has a Source option on its View menu that does the same thing. |
Once again, however, the best way to learn something is to do it yourself. Lets make a small Web page quiz form, so you can see how it works.
The following HTML document, which you should save as quiz.html, produces the form. This is a simple quiz. However, it will also serve to introduce some of the HTML buttons and boxes, and show how they can work with a Perl script.
<HTML> <HEAD> <TITLE>Quiz Form</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">A Little Quiz Form</H1> <HR> <H3 ALIGN="LEFT">In each category, click the button that best describes you or your preferences.</H3> <FORM ACTION="scripts/perl-cgi/quiz.pl" METHOD="POST"> <TABLE> <TR> <TD VALIGN="top"> <B>Your gender: </B><BR> <INPUT TYPE="radio" NAME="gender" VALUE="0"> Male<BR> <INPUT TYPE="radio" NAME="gender" VALUE="1"> Female<BR> <INPUT TYPE="radio" NAME="gender" VALUE="2"> Neither<BR> </TD> <TD VALIGN="top"> <B>Your age: </B><BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> 12 to 18<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 19 to 25<BR> <INPUT TYPE="radio" NAME="age" VALUE="2"> 26 to 30<BR> <INPUT TYPE="radio" NAME="age" VALUE="3"> Older than 30<BR> <INPUT TYPE="radio" NAME="age" VALUE="4"> Real old<BR><BR> </TD> <TD VALIGN="top"> <B>Your favorite film: </B><BR> <INPUT TYPE="radio" NAME="film" VALUE="0"> "Citizen Kane"<BR> <INPUT TYPE="radio" NAME="film" VALUE="1"> "Benji"<BR> <INPUT TYPE="radio" NAME="film" VALUE="2"> "Dawn of the Dead"<BR> <INPUT TYPE="radio" NAME="film" VALUE="3"> "It's a Wonderful Life"<BR> <INPUT TYPE="radio" NAME="film" VALUE="4"> "Intolerance"<BR> <INPUT TYPE="radio" NAME="film" VALUE="5"> None of these<BR> </TD> <TD VALIGN="top"> <B>You think the Rolling Stones are too old </B> <INPUT TYPE="checkbox" NAME="oldstones"> </TD> </TR> </TABLE> <H3 ALIGN="LEFT">Optional information:</H3> <B>Name:</B><BR> Last <INPUT TYPE="text" NAME="lastname" SIZE="16"> First <INPUT TYPE="text" NAME="lastname" SIZE="16"><BR> <BR> <CENTER> <INPUT TYPE="submit" VALUE="Send Information"> <INPUT TYPE="reset" VALUE="Clear Form"> </CENTER> </FORM> </BODY> </HTML>
Your finished quiz form should look something like the example in Figure 6.3, displayed in Netscape Navigator.
Figure 6.3: The finished quiz form
This form uses HTML radio buttons, a check box, and two text fields, so it will give its Perl program a pretty good mix of the different input types. It also uses the POST method to submit the data, rather than the GET method you used in Skill 5. Youll learn more about that shortly.
TIP: Note the use of VALIGN=top in the HTML <TD> tags that mark the beginning of each table column. The alignment command ensures that each of the columns lines up correctly with the others; it makes your tables look good.
Install quiz.html in a directory that is accessible through your Web server.
Previous | Table of Contents | Next |
![]() |
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. |