Chapter 27 -- Form Creation and Design Chapter 27 Form Creation and Design by William Robert Stanek CONTENTS What Forms Are and Why You Want To Use Them Form Design The <FORM> Tag The METHOD Attribute The ACTION Attribute The EncTYPE Attribute Adding Content to the Form Adding Input Fields Adding Selection Menus Adding Text Windows Creating a Form Results Page Summary In previous chapters, you learned how to create wonderful Web publications that include multimedia and sizzling HTML 3.2 features. Yet now that you've created the beginnings of a wonderful publication, how do you get the feedback, comments, and praise from visitors that will make all your hard work worthwhile? The answer is easy: add a fill-out form to an appropriate place in your Web publication and invite the reader to participate. Since HTML 2.0 introduced forms, Web publishing has never been the same. Forms are the primary way to add interactivity and two-way communication to your Web publications. They provide friendly interfaces for inputting data, searching databases, and accessing indexes. To submit a fill-out form as input to a CGI script, the user only has to click on the Submit button. Your forms can contain pulldown menus, pushbuttons, text, and graphics. What Forms Are and Why You Want To Use Them In your daily life, you see forms all the time: Forms you fill out at the doctor's office Credit card bills that require you to fill in the dollar amount in tiny boxes Surveys and questionnaires you receive in the mail Magazine compatibility polls that you fill out at the checkout counter Although you may not think of these items as forms, all of them require you to fill in information or make selections from groups of numbered or lettered items. When you submit a printed form, someone on the receiving end has to handle the information. In an increasingly computerized world, this usually means entering the information into a database or spreadsheet. Major companies hire dozens of people for the specific task of entering the information on thousands of forms that flood the company every day into the company database. This huge expense is a tremendous burden on the company. Imagine a virtual office where thousands of forms are entered into the company database every day without a single worker. The forms are processed efficiently, almost instantly, and the customer can get feedback within seconds of submitting a form. The cost for what otherwise would be a mammoth undertaking is a few hours-the time it takes you to design a fill-out form and build a CGI script to process the information. Using forms, you open a two-way communication channel between you and visitors to your Web publications. Visitors can send comments directly to you. You can create CGI scripts to process the input automatically. In this way, readers can get immediate results. You can e-mail the input to your e-mail address. This way, you can respond to readers' questions and comments easily and personally. You can also set up a script to process the input, give results to the reader, and send yourself e-mail. While the scripting part of the process runs in the background, the reader sees the fill-out form. Readers can interact with forms by entering information in spaces provided, by making selections from pulldown menus, by activating pushbuttons, and by submitting the data for instant processing. Figure 27.1 shows a simple form with areas for text entry. Even this simple form is a powerful tool for inviting reader participation. Figure 27.1 : Even simple forms are useful for inviting reader participation. Form Design Although creating a form is easy, designing a good form can be a little difficult. Some publishers use generic all-purpose forms that fail because the form wasn't designed with a specific purpose in mind. The key to designing forms is to use them for a specific purpose. When you want to get feedback from readers, you create a form for reader feedback. When you want to take orders online, you create a form for submitting online orders. Designing forms that are useful to readers and to you as the publisher should be your primary goal. A form that is useful to readers will be used. A form that is useful to you as the publisher makes your job easier. When designing forms, keep the following guidelines in mind. A form that is useful to the reader is Friendly Well-organized Sized correctly A form that is useful to you as the publisher does the following: Uses uniquely named and easily identifiable keywords for fields Allows for brevity of processing and quick indexing whenever possible Provides subtle guidance to the reader on the amount of input you are looking for The <FORM> Tag All elements of your forms are enclosed by the beginning tag <FORM> and ending tag </FORM>. Within these tags, you can include almost any valid HTML tag, such as paragraph and heading tags. Although multiple forms can be on a single Web page, you cannot create subforms within a form. The reason for this restriction is that the form must be submitted to be processed in a specific manner. The way forms are submitted is based on the following things: The method used to submit the form The action to be performed when the form is submitted The optional type of encoding to be performed on the form The METHOD Attribute The METHOD attribute specifies the method for submitting the form. Currently, this attribute has two acceptable values: METHOD=GET METHOD=POST As discussed briefly in the previous chapter, the preferred submission method is POST. When you use POST, the data is sent as a separate input stream through the server to your gateway script. This method enables the server to pass the information directly to the gateway script without assigning variables or arguments. The value of the CONTENT_LENGTH environment variable tells the CGI script how much data to read from the standard input stream. With this method, there is no limit on the amount of data that can be passed to the server. The default submission method is GET. Data submitted using GET is appended to the script URL. The script URL and the data are passed to the server as a single URL-encoded input. The server receiving the input assigns the data being passed to two variables. The script URL is assigned to the environment variable SCRIPT_NAME. The data is assigned to the environment variable QUERY_STRING. Assigning the data to variables on a UNIX system means passing the data through the UNIX shell. The number of characters you can send to UNIX shell in a single input is severely limited. Some servers restrict the length of this type of input to 255 characters. This restriction means only a limited amount of data can be appended to a URL before truncation occurs. When truncation occurs, you lose data. Consequently, you should use GET only when the length of data input is small. The ACTION Attribute The ACTION attribute specifies the action to be performed when a form is submitted. A form without an ACTION attribute will not be processed, so your forms must always include this attribute. You can define an action for your forms as the URL to a gateway script to be executed or as an action. By specifying the URL to a gateway script, you can direct input to the script for processing. The URL provides a relative or an absolute path to the script. Scripts defined with relative URLs are on your local server. Scripts defined with absolute URLs can be on a remote or local server. Most CGI scripts are located in the cgi-bin directory. You could access a script in a cgi-bin directory as follows: ACTION="http://tvp.com/cgi-bin/your_script" An ACTION could be inserted in the <FORM> tag as follows: <FORM METHOD="POST" ACTION="http://tvp.com/cgi-bin/datasort.pl"> . . . </FORM> You can also use the ACTION attribute to specify an action to be performed. The only action currently supported is mailto, which mails the contents of a form to the address you specify. Most current browser and server software support the mailto value. You can use the mailto value as follows: <FORM METHOD="POST" ACTION="mailto:[e-mail]"> . . . </FORM> A form created using the preceding example would be sent to [e-mail]. The mailto value provides you with a simple solution for using forms that does not need to be directed to a CGI script to be processed. This is great news for Web publishers who don't have access to CGI. Because the contents of the form are mailed directly to an intended recipient, the data can be processed offline as necessary. The EncTYPE Attribute The EncTYPE attribute specifies the MIME content type for encoding the form data. The client encodes the data before passing it to the server. Data from fill-out forms is not encoded to prevent the data from being read. Data from fill-out forms is encoded to ensure input fields can be easily matched to key values. By default, the data is x-www-form-encoded. This encoding is also called URL encoding and was discussed in the previous chapter. If you do not specify an encoding type, the default value is used automatically. Although, in theory, you can use any valid MIME type, such as text/plain, most forms on the Web use the default encoding to prevent problems you would experience when trying to manipulate data that has not been encoded in some way. You can use the EncTYPE attribute in your forms as follows: <FORM METHOD="POST" ACTION="cgi-bin/query.pl" EncTYPE="x-www-form-encoded"> . . . </FORM> Adding Content to the Form The elements designed specifically for use within forms are what make fill-out forms useful and interactive. When adding content to your forms, keep in mind the simple rules outlined earlier in this chapter. One way of following these rules is to always provide descriptions along with form fields. As with print forms, the descriptions for fields should be brief. Short field descriptions make the form easier to read. Here is a wordy field description: You should enter your full name in the adjacent text window using your first name, middle initial, and last name as appropriate. Here is a better field description: Please enter your name (First, Middle Initial, Last): Input fields should be correctly sized to ensure they are usable. A good field size ensures all key information entered by the user is visible in the input area. For a telephone number, you could define an input field 12 characters in length to enable customers to enter their phone numbers and area codes. If a reader puts parentheses around the area code, the length of the input field should be stretched to 14 characters. If the reader lives in another country, the length of the input field should be stretched to at least 16 characters. The form itself should be correctly sized and well-organized to ensure readers will take the time to fill it out. A good form balances the number of fields against the length of the fields. This guideline means that a form that requires lengthy input from readers should have few fields and a form that requires the reader to make many selections but requires limited input could have many fields. Three key elements are used to add content to forms: INPUTUsed to define input fields. SELECTUsed to create selection menus. TEXTAREAUsed to define a multiple-line text input window. Adding Input Fields Using the INPUT element, you can add check boxes, radio buttons, images, text windows, and other elements to your forms. You define an INPUT element by labeling it with a TYPE and a NAME. The input TYPE determines how the input field looks on the screen. NAME labels the field with a keyword you can use in your CGI scripts. The basic format of the INPUT element is as follows: <INPUT TYPE="type of field" NAME="input field name"> Input fields and associated data are sent to a CGI script as keyword and value pairs. The method used to submit the form determines the way the data is submitted to the CGI script. Let's look at two examples of the data flow from a form to a script. Both forms have three input fields, and the user submits the forms with the following values: answer1 = Monday night football answer2 = Chicago Bears answer3 = Super bowl bound The first example uses the GET method: <FORM METHOD="GET" ACTION="cgi-bin/query.pl"> <INPUT TYPE="text" NAME="answer1"> <INPUT TYPE="text" NAME="answer2"> <INPUT TYPE="text" NAME="answer3"> </FORM> When the GET method is used, the server sets the following environment variables, and then passes the input to the query.pl script: PATH=/bin:/usr/bin:/usr/etc:/usr/ucb SERVER_SOFTWARE = ncSA/1.3 SERVER_NAME = www.tvpress.com GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT= 80 REQUEST_METHOD = GET HTTP_AccEPT = application/octet-stream, application/postscript, application/rtf, application/x-compress, application/x-dvi, application/x-gzip, application/x-zip-compressed, audio/basic, audio/x-aiff, audio/x-wav, image/gif, image/jpeg, image/tiff, image/x-portable-bitmap, message/external-body, message/partial, message/rfc822, multipart/alternative, multipart/digest, multipart/mixed, multipart/parallel, text/html, text/plain, video/mpeg, video/quicktime, video/x-msvideo PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/query.pl QUERY_STRING = answer1=Monday+night+football&answer2=Chicago+Bears& answer3=Super+bowl+bound REMOTE_HOST = REMOTE_ADDR = REMOTE_USER = AUTH_TYPE = CONTENT_TYPE = CONTENT_LENGTH = The second example uses the POST method: <FORM METHOD="POST" ACTION="cgi-bin/query.pl"> <INPUT TYPE="text" NAME="answer1"> <INPUT TYPE="text" NAME="answer2"> <INPUT TYPE="text" NAME="answer3"> </FORM> When the POST method is used, the server sets the following environment variables, and then passes the input to the query.pl script: PATH=/bin:/usr/bin:/usr/etc:/usr/ucb SERVER_SOFTWARE = ncSA/1.3 SERVER_NAME = www.tvpress.com GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT= 80 REQUEST_METHOD = POST HTTP_AccEPT = application/octet-stream, application/postscript, application/rtf, application/x-compress, application/x-dvi, application/x-gzip, application/x-zip-compressed, audio/basic, audio/x-aiff, audio/x-wav, image/gif, image/jpeg, image/tiff, image/x-portable-bitmap, message/external-body, message/partial, message/rfc822, multipart/alternative, multipart/digest, multipart/mixed, multipart/parallel, text/html, text/plain, video/mpeg, video/quicktime, video/x-msvideo PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/query.pl QUERY_STRING = REMOTE_HOST = REMOTE_ADDR = REMOTE_USER = AUTH_TYPE = CONTENT_TYPE = application/x-www-form-urlencoded CONTENT_LENGTH = 75 The following data is passed to the query.pl script using the standard input stream: answer1=Monday+night+football&answer2=Chicago+Bears&answer3=Super+bowl+bound TYPE has eight possible values. Although forms will let you try to associate just about any attribute with any input type, certain attributes should be used with certain types. Knowing this will save you a lot of time when you create forms. The next sections describe the useful attributes for each of the following input types: Input TypeDescription TEXT A one-line text field of a width defined in the form chECKBOX One or more boxes that a user can select HIDDEN A field that is not displayed to the user but is sent to your script IMAGE An image that can be clicked on to submit the form PASSWORD A text field where all data entered is seen as the * character RADIO One or more radio buttons that a user can turn on or off RESET A button that clears the form when clicked SUBMIT A button that submits the form when clicked Using TEXT Fields The TEXT type enables you to define a basic input field for text. TEXT fields are displayed on a single line. You can use these four attributes with TEXT fields: MAXLENGTH The maximum allowable length of the field. Beware, if this attribute is not set, there is no limit. NAME The keyword associated with the input field. SIZE The width of the input field, expressed as the number of characters for the text area. VALUE An initial value for the field that will be displayed in the text area. The user can add to this information and, if necessary, delete the information to enter new information. The following is an example of the code for a TEXT input field: <INPUT TYPE="TEXT" NAME="answer1" SIZE="60"> In the example, the SIZE attribute defines the visible area for the TEXT field on the screen to be 60 characters wide. Because the example does not specify the maximum length of the field, the text will scroll, enabling the user to enter more than 60 characters. To limit the input to a specific value, use the MAXLENGTH attribute, as in the following example: <INPUT TYPE="TEXT" NAME="answer1" SIZE="60" MAXLENGTH="60"> Figure 27.2 shows a form that uses text fields. As you can see from the figure, this form is used to get contact information from a customer. The markup for this page is in Listing 27.1. Figure 27.2 : Using text elements in a form. Listing 27.1. Using text fields. <HTML> <HEAD> <TITLE>Using Text Fields</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <B>Please fill in the details:</B> <FORM METHOD="POST" ACTION="cgi-bin/contact.pl"> <P> <B> Name <INPUT TYPE="TEXT" NAME="nameField" SIZE="49"> <BR> Title <INPUT TYPE="TEXT" NAME="titleField" SIZE="50"> <BR> Company <INPUT TYPE="TEXT" NAME="companyField" SIZE="46"> <BR> Street Address <INPUT TYPE="TEXT" NAME="streetField" SIZE="41"> <BR> City <INPUT TYPE="TEXT" NAME="cityField" SIZE="51"> <BR> State/Province <INPUT TYPE="TEXT" NAME="stateField" SIZE="41"> <BR> ZIP Code/Postal Code <INPUT TYPE="TEXT" NAME="zipField" SIZE="34"> <BR> Telephone <INPUT TYPE="TEXT" NAME="telepreField" SIZE="4"> - <INPUT TYPE="TEXT" NAME="teleField" SIZE="8"> <BR> Fax <INPUT TYPE="TEXT" NAME="faxpreField" SIZE="4"> - <INPUT TYPE="TEXT" NAME="faxField" SIZE="8"> <BR> Email Address <INPUT TYPE="TEXT" NAME="emailField" SIZE="41"> </B> </P> <P ALIGN="LEFT"> <INPUT TYPE="SUBMIT" NAME="Button" VALUE="Send Email"> <I><B>when you are finished.</B></I> </P> <HR> </FORM> </BODY> </HTML> Figure 27.3 shows another form for submitting contact information using text fields. The form uses formatting techniques to make it more visually appealing. To see how this was done, refer to Listing 27.2. Figure 27.3 : Formatting techniques can add to the visual appeal of your form. Listing 27.2. More text fields. <HTML> <HEAD> <TITLE>More Text Fields in Forms</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2><B>Please provide the following contact information:</B></H2> <FORM METHOD="POST" ACTION="mailto:[e-mail]"> <P></P> <BLOCKQUOTE> <PRE><EM> Name </EM> <INPUT TYPE="text" SIZE="35" MAXLENGTH="50" NAME="Contact_FullName"> <EM> Title </EM> <INPUT TYPE="text" SIZE="35" MAXLENGTH="50" NAME="Contact_Title"> <EM> Organization </EM> <INPUT TYPE="text" SIZE="35" MAXLENGTH="50" NAME="Contact_Organization"> <EM> Work Phone </EM> <INPUT TYPE="text" SIZE="25" MAXLENGTH="25" NAME="Contact_WorkPhone"> <EM> FAX </EM> <INPUT TYPE="text" SIZE="25" MAXLENGTH="25" NAME="Contact_FAX"> <EM> E-mail </EM> <INPUT TYPE="text" SIZE="25" MAXLENGTH="50" NAME="Contact_Email"> <EM> URL </EM> <INPUT TYPE="text" SIZE="25" MAXLENGTH="25" NAME="Contact_URL"> </PRE> </BLOCKQUOTE> <P></P> <P> <INPUT TYPE="submit" VALUE="Submit Form"> <INPUT TYPE="reset" VALUE="Reset Form"> </P> </FORM> </BODY> </HTML> Using Check Boxes and Radio Buttons The chECKBOX input field creates boxes that a user can select. The RADIO input field creates circular buttons that a user can select. Some browsers display selected check boxes and radio buttons using an x for a check box and a round bullet for a radio button. Other browsers display check boxes and radio buttons as graphical pushbuttons with 3D flair. These input fields have four attributes: chECKED The check box or radio button is automatically selected when viewed. The best use of this attribute is for default options that can be deselected if necessary. DISABLED The user cannot manipulate the check box or radio button. You will probably want to use this attribute only for testing your forms. NAME The keyword associated with the input field. VALUE The value to assign if the user activates the check box or radio button. Although the primary difference between a check box and a radio button may seem to be their shape, a fundamental difference exists in the way they behave. Check boxes allow users to make multiple selections. Radio buttons, on the other hand, allow users to make only one selection. When creating check boxes and radio buttons, carefully consider how you will use them. Use radio buttons with a single associated keyword value when the user should make only one selection, such as a choice of A, B, or C. Use check boxes with multiple associated keyword values when the user can make multiple selections, such as a choice of all or any of A through E. Figure 27.4 depicts how check boxes and radio buttons can be used in a form. Listing 27.3 shows the code for the form. Figure 27.4 : A survey using check boxes. Listing 27.3. Sample form using check boxes and radio buttons. <HTML> <HEAD> <TITLE>Using Check Boxes & Radio Buttons</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <STRONG> <FORM METHOD="POST" ACTION="/cgi-bin/survey.pl"> <H1>Optimism Survey</H1> <P>1. Do you consider yourself to be an optimist or a pessimist? <P><INPUT TYPE="checkbox" NAME="optimist" VALUE="yes" >Optimist</P> <P><INPUT TYPE="checkbox" NAME="optimist" VALUE="no" >Pessimist</P> <P>2. Is a rainy Sunday? <P><INPUT TYPE="checkbox" NAME="rainyday" VALUE="A" >Soothing <INPUT TYPE="checkbox" NAME="rainyday" VALUE="B" >Restful <P><INPUT TYPE="checkbox" NAME="rainyday" VALUE="C" >Dreary <INPUT TYPE="checkbox" NAME="rainyday" VALUE="D" >Dreadful <P>3. Is a partially filled glass of water <P><INPUT TYPE="radio" NAME="glass" VALUE="A" >Half Empty <INPUT TYPE="radio" NAME="glass" VALUE="B" >Half Full <P>4. What do you think about Monday Mornings? <P><INPUT TYPE="radio" NAME="mondays" VALUE="A" >First day of a great week <INPUT TYPE="radio" NAME="mondays" VALUE="B" >First day back to work <P><INPUT TYPE="radio" NAME="mondays" VALUE="C" >Four days to go till Friday <INPUT TYPE="radio" NAME="mondays" VALUE="D" >Five days till freedom </FORM> </BODY> </HTML> Hidden Fields in Forms The HIDDEN input field is not displayed and is only useful to provide essential input to your script. Hidden elements have two attributes: NAME The keyword associated with the input field VALUE The value of the field Use HIDDEN fields when you want the same script to serve more than one purpose. The Web publisher using this HIDDEN input field has several publications that may be subscribed to: <INPUT TYPE="hidden" NAME="subscription" VALUE="magazine-NewsDay"> The publisher uses the HIDDEN field to track the publication the customer is subscribing to by setting a unique value for the subscription input field in the form. As all subscriptions require the same information from customers, the publisher uses a single CGI script to process subscriptions from multiple sources. Listing 27.4 is the outline of a Perl script that could be used to process the subscription information. Listing 27.4. Partial Perl script for processing subscriptions. #!/usr/bin/perl #Check the method used to submit the form $METHOD = $ENV{'REQUEST_METHOD'}; #Tell script where to look for POST-submitted input if ( $METHOD eq 'POST' ) { read(stdin, $SINPUT, $ENV{'CONTENT_LENGTH'}); } else #Tell script where to look for POST-submitted input if ( $METHOD eq 'GET' ) { $SINPUT = $ENV{'QUERY_STRING'}; } else #Tell script to exit if neither POST or GET are used { exit( 1 ); } #Process URL-encoded input into keywords and value pairs foreach $SINPUT (split(/&/)) { $SARRAY[$i] =~ s/\+/ /g; ($input_name, $value) = split(/=/,$SARRAY[$i],2); $input_name =~ s/%(..)/pack("c",hex($1))/ge; $value =~ s/%(..)/pack("c",hex($1))/ge; $SARRAY{$input_name} = $value; } #Set the output file for the subscription information if ($SARRAY{'subscription'} eq 'magazine-NewsDay') { $DATAOUTFILE = "news.db" } else if ($SARRAY{'subscription'} eq 'magazine-WebTimes') { $DATAOUTFILE = "webtimes.db" } else { $DATAOUTFILE = "running.db" } #The rest of the script would process the customer's subscription information, #such as name, address, and payment method. Using PASSWORD Fields To allow users to enter password information without revealing the password to onlookers, you can use the PASSWORD input field. All text entered in a PASSWORD field is seen as asterisks. The asterisks are used only to mask the characters and do not affect how the text is passed to your gateway script. If you combine this element with a TEXT input field for the user's login ID, you can pass this information to a script that would validate the user's access to protected areas of your Web site. This element has four attributes: MAXLENGTH The maximum allowable length of the field. Beware, if this attribute is not set, there is no limit. NAME The keyword associated with the input field. SIZE The width of the input field, expressed as the number of characters for the text area. VALUE An initial value for the field that will be displayed in the text area. The user can add to this information and, if necessary, delete the information to enter new information. The following is a sample PASSWORD element: <INPUT TYPE="password" NAME="net_password" SIZE=12 MAXLENGTH=12 > Figure 27.5 shows a great use of password fields in a Web page. The HTML used to create this page is shown in Listing 27.5. Figure 27.5 : Using password fields in your forms. Listing 27.5. Entering account information. <HTML> <HEAD> <TITLE>Using Password Fields</TITLE> </HEAD> <BODY BGCOLOR="#000000" BACKGROUND="Space.gif" TEXT="#FFFFFF"> <H2>VRML Journeys Entry Port</H2> <HR SIZE="10" NOSHADE> <FORM METHOD="POST" ACTION"enter.pl"> <P>Please enter your account information:</P> <BLOCKQUOTE> <PRE><EM> User name </EM> <INPUT TYPE="text" SIZE="16" MAXLENGTH="16" NAME="Account_Username"> <EM> Password </EM> <INPUT TYPE="password" SIZE="16" MAXLENGTH="16" NAME="Account_Password"> <EM>Confirm password </EM> <INPUT TYPE="password" SIZE="16" MAXLENGTH="16" NAME="Account_PasswordConfirm"> </PRE> </BLOCKQUOTE> <P> <INPUT TYPE="submit" VALUE="Submit Form"> <INPUT TYPE="reset" VALUE="Reset Form"> </P> </FORM> <HR SIZE="10" NOSHADE> <P>&nbsp;</P> </BODY> </HTML> Using RESET and SUBMIT Two extremely useful input types are RESET and SUBMIT. Usually these features for forms are displayed as graphical pushbuttons. A reset button clears the form when selected. A submit button submits the form when selected. By default, the reset buttons are labeled with the value of RESET, and submit buttons are labeled with the value SUBMIT. You change the label for these buttons using the VALUE attribute, as shown in the following examples: <INPUT TYPE="reset" VALUE="Clear Form"> <INPUT TYPE="submit" NAME="button1" VALUE="Submit Form"> Another useful attribute for the submit button is the NAME attribute. Using the NAME attribute, you can track which SUBMIT button a user pressed. This provides another way of tracking the precise form used to submit input. Using this feature of the NAME attribute, you can create a quick menu for your site. The form in Figure 27.6 uses a CGI script to process the input and direct the user to a new page. When a user clicks on a button, the input is passed to the named script for processing. Listing 27.6 shows the markup for the example. Figure 27.6 : A quick menu using a form. Listing 27.6. Creating a form-based menu. <HTML> <HEAD> <TITLE>A form-based menu</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <P ALIGN="CENTER"><IMG SRC="blackdiv.jpg"></P> <DIV ALIGN=CENTER> <FORM METHOD="GET" ACTION="../cgi-bin/quick-menu"> <IMG SRC="tower.gif"> <INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="Home Page"> <INPUT TYPE="SUBMIT" NAME="BUTTON4" VALUE="Book Info"> <INPUT TYPE="SUBMIT" NAME="BUTTON5" VALUE="Instant Orders"> <P> <INPUT TYPE="SUBMIT" NAME="BUTTON6" VALUE="User Help Center"> <INPUT TYPE="SUBMIT" NAME="BUTTON7" VALUE="WWW Info"> <INPUT TYPE="SUBMIT" NAME="BUTTON8" VALUE="Resources"> <INPUT TYPE="HIDDEN" NAME="MENU" VALUE="MENU1"> <IMG SRC="tower.gif"> </FORM> </DIV> <P ALIGN="CENTER"><IMG SRC="blackdiv.jpg"></P> </BODY> </HTML> The form in Figure 27.7 uses multiple forms to create a menu. An ACTION attribute is defined for each form. When a user clicks on a button, the browser carries out the assigned action. Because the actions can all be processed by the client, no CGI script is involved. The code for the example is available in Listing 27.7. Figure 27.7 : A quick menu using multiple forms processed by client. Listing 27.7. A form-based menu without a script. <HTML> <HEAD> <TITLE>A form-based menu that doesn't need a script!</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <P ALIGN="CENTER"><IMG SRC="blackdiv.jpg"></P> <DIV ALIGN=CENTER> <FORM METHOD="GET" ACTION="vphp.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TVP Home Page"> </Form> <FORM METHOD="GET" ACTION="vpbg.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON2" VALUE="BackGround"> </Form> <FORM METHOD="GET" ACTION="new.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON3" VALUE="What's New"> </Form> <FORM METHOD="GET" ACTION="books.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON4" VALUE="Book Info"> </Form> <FORM METHOD="GET" ACTION="orders.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON5" VALUE="Instant Orders"> </Form> <FORM METHOD="GET" ACTION="resources.html"> <INPUT TYPE="SUBMIT" NAME="BUTTON8" VALUE="Resources"> </Form> </DIV> <P ALIGN="CENTER"><IMG SRC="blackdiv.jpg"></P> </BODY> </HTML> An alternative to the default style of the submission button is to define a fancy button the user can click to submit the form. You do this with the IMAGE input field. Image elements have three attributes: ALIGNUsed to align the image with text in the same line. Valid values are TOP, MIDDLE, and BOTTOM. NAMEThe keyword associated with the input field. SRCThe image to be displayed. The following is a sample image element: <FORM METHOD="POST" ACTION="/cgi-bin/clickit.pl"> <INPUT TYPE="image" NAME="pubform" SRC="fancybutton.gif" ALIGN="MIDDLE"> </FORM> Note You do not need a SUBMIT type in the INPUT field containing the IMAGE type declaration. The IMAGE type is used in place of the SUBMIT type; if you click the image, the form will be automatically submitted. Adding Selection Menus Beyond input fields for forms, you can also use selection fields. The SELECT element is used to create two types of selection menus for your forms. An onscreen menu has selections that are completely visible. A pulldown menu has selection elements that are hidden until the reader activates the menu. The SELECT element has a beginning and an ending tag associated with it. You use the NAME attribute to specify a keyword for the selection menu. Using the SIZE attribute, you can specify the number of selection elements to display on the screen, as in the following examples: <SELECT SIZE=1 NAME="Menu1"> . . . </SELECT> <SELECT SIZE=7 NAME="Menu2"> . . . </SELECT> By default, the user can only select one option from the menu. The first selection menu in the preceding example has a one-line window with a pulldown menu. The second selection menu is an onscreen menu with seven displayed items and a scrollbar for accessing additional elements. To allow the user to make multiple selections, use the MULTIPLE attribute. Most browsers allow you to make multiple selections by holding down the Control key on the keyboard and clicking with the left mouse button when the pointer is over the additional item you want to select. The following is an example of this attribute in use: <SELECT SIZE=7 NAME="books" MULTIPLE> . . . </SELECT> You define selections for the menu using the OPTION element. This element has two basic formats: <OPTION>Item 1 <OPTION SELECTED>Item 2 The first menu item can be selected by a user. The second menu item is selected by default. Users can unselect the default option by clicking it. Figure 27.8 shows several types of selection menus. The first example shows a pulldown menu as it first appears on screen. The second example shows an onscreen menu. This menu accepts multiple selections. Note that onscreen menus occupy more space than pulldown menus. Consider using onscreen menus when the user can make multiple selections and using pulldown menus when the user can make only one selection. Listing 27.8 contains the HTML for the form. Figure 27.8 : Using selection menus. Listing 27.8. Creating a selection menu in a form. <HTML> <HEAD> <TITLE>Favorite Reading</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <FORM METHOD="POST" ACTION="/cgi-bin/books.pl"> <P ALIGN=LEFT><IMG SRC="Books.gif" ALIGN="ABSMIDDLE"> <B>What types of print publications do you read regularly?</B></P> <SELECT NAME="publications" SIZE="7" MULTIPLE> <OPTION>Books </OPTION> <OPTION>Magazines </OPTION> <OPTION>Professional journals </OPTION> <OPTION>Newspapers </OPTION> <OPTION>Reference works </OPTION> <OPTION>Comic Books </OPTION> <OPTION>None </OPTION> </SELECT> <P ALIGN=RIGHT><B>What type of nonfiction do you enjoy reading?</B> <IMG SRC="Openbook.gif" ALIGN="ABSMIDDLE"></P> <SELECT SIZE="1" NAME="NonFiction"> <OPTION>Autobiography </OPTION> <OPTION>Biography </OPTION> <OPTION>Computers/Internet </OPTION> <OPTION>Cooking </OPTION> <OPTION>Health/Medicine </OPTION> <OPTION>How-To </OPTION> <OPTION>Money/Finance </OPTION> <OPTION>New age </OPTION> <OPTION>Parenting </OPTION> <OPTION>Reference </OPTION> <OPTION>Self-Help </OPTION> <OPTION>Sports </OPTION> <OPTION>Travel </OPTION> </SELECT> </P> <P><IMG SRC="Magnify.gif" ALIGN=ABSMIDDLE> <B>What type of novel do you prefer to read?</B></P> <SELECT NAME="Fiction" SIZE="3"> <OPTION>Adventure </OPTION> <OPTION>Fantasy </OPTION> <OPTION>Horror </OPTION> <OPTION>Humor </OPTION> <OPTION>Mystery </OPTION> <OPTION>Romance </OPTION> <OPTION>Science fiction </OPTION> <OPTION>Suspense </OPTION> <OPTION>Western </OPTION> </SELECT> <P><BR CLEAR="ALL"></P> <P> <INPUT TYPE="reset" VALUE="Clear Form"> <INPUT TYPE="submit" NAME="button1" VALUE="Submit Form"> </P> </FORM> </BODY> </HTML> Selection elements and associated data are sent to a CGI script as keyword and value pairs. As with other elements, the method used to submit the form determines the way the data is submitted to the CGI script. To see exactly how this works with selection menus and options, follow the data flow from the user's browser to the CGI script in the example. The user selected the following options from the preceding form: publications = Books, Magazines, Newspapers nonfiction = Computers/Internet fiction = Adventure The form uses the POST method to submit data to the books.pl script. The client passes the data to the server. The server sets the following environment variables before passing the data to the script: PATH=/bin:/usr/bin:/usr/etc:/usr/ucb SERVER_SOFTWARE = CERN/3.0 SERVER_NAME = www.tvp.com GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT= 80 REQUEST_METHOD = POST HTTP_AccEPT = application/octet-stream, application/postscript, application/rtf, application/x-compress, application/x-dvi, application/x-gzip, application/x-zip-compressed, audio/basic, audio/x-aiff, audio/x-wav, image/gif, image/jpeg, image/tiff, image/x-portable-bitmap, message/external-body, message/partial, message/rfc822, multipart/alternative, multipart/digest, multipart/mixed, multipart/parallel, text/html, text/plain, video/mpeg, video/quicktime, video/x-msvideo PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/books.pl QUERY_STRING = REMOTE_HOST = REMOTE_ADDR = REMOTE_USER = AUTH_TYPE = CONTENT_TYPE = application/x-www-form-urlencoded CONTENT_LENGTH = 88 The following data is passed to the books.pl script using the standard input stream: publications=Books,Magazines,Newspapers&nonfiction=Computers/Internet& fiction=Adventure Adding Text Windows The final element you can use with your forms is the TEXTAREA element. This element has more functionality than the text field used with the INPUT element because it enables you define text windows of any size to display onscreen. Text windows can be used to input large amounts of data. Although the size of the window is defined in rows and columns, you have no real control over how much data the user can enter into the window because text windows have vertical and horizontal scrollbars that enable the user to scroll left to right as well as up and down. Text windows are defined with a pair of tags. Any text between the beginning and ending TEXTAREA tags is used as the initial input to the text window. Default text provided for a text window is displayed exactly as entered. Although the user can erase any default input if necessary, initial input should be used primarily to save the user time. TEXTAREA has three attributes: NAME The keyword associated with the input field. ROWS The height of the text window in number of lines. COLS The width of the text window in number of characters. To define a text window 8 rows tall and 60 characters wide, you would use the following: <TEXTAREA NAME="Publisher_Query" ROWS=8 COLS=60></TEXTAREA> This sample form contains two text areas: <FORM METHOD="POST" ACTION="/cgi-bin/job.pl"> <P>Describe your current job.</P> <TEXTAREA NAME="JobDescription" ROWS=10 COLS=60></TEXTAREA> <P>What would your dream job be like?</P> <TEXTAREA NAME="DreamJob" ROWS=10 COLS=60></TEXTAREA> <INPUT TYPE="reset"> <INPUT TYPE="submit" VALUE="Submit Form"> </FORM> Figure 27.9 shows a sample form using a text window. The source for the form page is shown in Listing 27.9. Figure 27.9 : Using text windows. Listing 27.9. Text windows in forms. <HTML> <HEAD> <TITLE>Getting Customer Feedback</TITLE> </HEAD> <BODY BACKGROUND="BACKGROUND.gif" VLINK="#00F0FF" LINK="#000000" TEXT="#000000"> <H1> <IMG ALIGN="ABSMIDDLE" HSApcE="100" SRC="FEEDBACK.gif"> <FONT COLOR="Navy">How are we doing?</FONT> <IMG ALIGN="ABSMIDDLE" HSApcE="100" SRC="FEEDBACK.gif"> </H1> <BR CLEAR=ALL> <FORM METHOD="POST" ACTION="comment.pl"> <P><FONT COLOR="Black" SIZE="4"><B>Who should we direct your comments to?</B> </FONT> <BR> <SELECT NAME="select"> <OPTION VALUE="cservice" SELECTED>Customer Service</OPTION> <OPTION VALUE="techsupport">Technical Support</OPTION> <OPTION VALUE="pr">Public Relations</OPTION> <OPTION VALUE="general">General Information</OPTION> </SELECT> </P> <P><TEXTAREA COLS="60" NAME="TextField" ROWS="10"></TEXTAREA></P> <INPUT TYPE="SUBMIT" NAME="Button" VALUE="Send Comments"> <INPUT TYPE="RESET" NAME="Button" VALUE="Clear"> </FORM> </BODY> </HTML> Creating a Form Results Page After submitting a form, users usually want to see a page that verifies the input has been accepted, such as the one shown in Figure 27.10. The creation of the results page is normally handled by the CGI script processing the user's input. Figure 27.10: An input verification page. The results page can contain the input the user entered and prompt the user to confirm the input, or it can be a page that simply thanks users for their input. Listing 27.10 shows a scripting routine written in Perl that displays a results page. Listing 27.10. A Perl scripting routine that displays a results page. #!/usr/bin/perl #Display results routine print "Content-Type: text/html\n\n"; #Add body in HTML format print <<"MAIN"; <HTML> <HEAD> <TITLE>Thanks for your input!</TITLE> </HEAD> <BODY BACKGROUND="Space1.jpg" TEXT="#FF0000"> <H1> <IMG SRC="Baskbal1.gif" ALIGN="ABSMIDDLE" HSPACE="5" VSPACE="5"> <FONT SIZE="+7">Thank You!</FONT> <IMG SRC="Baskbal1.gif" ALIGN="ABSMIDDLE" HSPACE="5" VSPACE="5"> </H1> <DIV ALIGN=CENTER> <H1>Your comments are very important to us...<BR>Please drop by again.</H1> <BR> <BR> <BR> <BR> <P>Return to <A HREF="../">home page.</A></P> </DIV> </BODY> </HTML> MAIN Summary Forms add interactivity and provide friendly interfaces for inputting data, searching databases, and accessing indexes. Your forms can contain many types of input fields. Some input fields are graphical in nature, like radio buttons and check boxes. Other input fields are textual in nature, like text areas and password fields. Designing forms that are useful to readers and to you as the publisher should be your primary goal.