This chapter expands on the discussion of HTML in Chapter 10, "An Overview of HTML 3.2," and explores a set of tags and attributes called form elements. These form elements enable you to do much more than just dress up a hypertext document; they bring a new and greatly needed functionality to HTML pages by enabling you to develop user interfaces. This is important, because forms extend HTML pages beyond the one-way presentation of a page to a reader to a two-way, interactive conversation between the page and the user of the form. In this chapter, you'll learn how to use forms to accept user input for several types of applications--most specifically, as a means to give users access to your database servers, databases, and other applications remotely distributed around the globe or resident on the same computer as the user's browser.
First, you'll see how forms are developed, and you'll see some examples of coding specific form elements. Next, you'll learn how to overcome some current limitations in HTML. Finally, you'll examine a few more comprehensive examples that use forms.
The American Heritage Dictionary defines a form as "a document with blanks for the insertion of details or information." Although this definition is accurate, forms in the context of an HTML page are much more functional. These forms provide an interface between a user and hidden applications, servers, or databases at some other (possibly very remote) locations. Forms enable a user to access information or provide input to some data repository. This access is provided via a number of server-side interface mechanisms such as CGI, server APIs (ISAPI and NSAPI, for example), the Internet Database Connector (IDC), Active Server pages, and server resident database gateway software. These mechanisms are covered in Part VII, "Server-Side Database Applications Development."
Forms come in many varieties, layouts, and levels of complexity. All forms are composed of a set of input objects that enable the user to enter data. Depending on the software tools available, forms can contain simple, text-based entry fields and graphical objects. Development environments such as the X Window System provide rich and functional sets of graphical objects that enable the user to do everything from entering text in a text-entry field to clicking the mouse on a variety of graphical objects. Other, less-capable systems, such as the now-dated VAX/VMS Forms Management System (FMS), represent the opposite end of the spectrum. User-input objects in these types of systems are not graphical, but instead are displayed onscreen using the ASCII character set. The functionality and user-friendliness (not to mention the attractiveness) of text-based forms are several steps below their graphical counterparts.
HTML forms provide a nice set of graphical input objects that you can use to build
complex and functional forms and user interfaces. These objects include checklists,
input fields, scrolled lists, radio buttons, and imagemaps. Figure 11.1 shows a typical
online form you might use to order a pizza. In later sections, you'll see how to
develop forms like this by using HTML.
FIGURE
11.1. Using an online order form to get
a pizza.
I assume that, because you purchased this book, you have data, databases, information, and services you want to make available to the public, fellow employees, or potential customers. Making your services and information easily accessible is a key way to ensure that users keep returning to your Website.
Forms provide an ideal user interface to many applications. They enable virtually anyone who can use a mouse to access information, data, and services you provide. Because complex queries, questions, and operations can be executed by a user clicking a few buttons, answering a few questions, and submitting the form, you don't need to be concerned with complex query or programming languages. Instead, you can code the application to accept user inputs and formulate a query to a database or a request for some specialized processing of user data. Part VII describes the mechanisms by which user input on forms is passed to the Web server and how you can develop the applications that receive this input.
You can use forms such as these as interfaces to a variety of applications, including the following:
Forms not only make life easier for the users of your site--they also simplify things for the software and system developers who develop and maintain your Website and applications. You don't need to have extensive programming skills in order to create HTML forms. Because these forms use a subset of standard HTML tags and attributes, they are relatively simple to code, and you can rapidly prototype a variety of user interfaces for applications. You typically can create, modify, and visually inspect forms in minutes, which also makes HTML forms easy to maintain. HTML forms provide a much less complicated development environment when compared to other interface development languages, such as UNIX shells, the X Window System, Tcl/Tk, and so on.
Considering all the powerful things HTML form elements enable you to do, you actually
deal with surprisingly few tags and attributes. Table 11.1 presents the current HTML
3.2 form tags and their attributes. Valid attribute values are listed in brackets
([]) following each attribute name. The pipe (|) symbol separating
these values indicates that the possible selections are mutually exclusive.
Table 11.1. HTML 3.2 Tags and Attributes.
| Tag | Attribute |
| <FORM> | ACTION="url" |
| </FORM> | METHOD=[GET|POST] |
| <INPUT> | TYPE=[TEXT|CHECKBOX|RADIO|IMAGE|PASSW RESET|HIDDEN]ORD|SUBMIT| |
| NAME="name" | |
| VALUE="value" | |
| SIZE="nchars" | |
| MAXLENGTH="nchars" | |
| CHECKED | |
| <OPTION> | SELECTED |
| </OPTION> | VALUE |
| <SELECT> | NAME="name" |
| </SELECT> | SIZE="number" |
| MULTIPLE | |
| <TEXTAREA> | NAME="name" |
| </TEXTAREA> | ROWS="number" |
| COLS="nchars" |
You use the <FORM></FORM> tag pair to specify user-input objects.
Inside this tag pair, you place sub-element tags that are to be interpreted and rendered
by the browser. These form sub- element tags include the following:
| <INPUT> | Renders user-input objects such as radio buttons, text fields, and checkboxes |
| <OPTION> | Specifies options in a selection list |
| <SELECT> | Creates selection lists |
| <TEXTAREA> | Creates freeform, text-input objects |
The <FORM> tag pair delimits the start and end of a form on an HTML page. Other form element tags must be placed within a <FORM> to be interpreted properly by the browser. The following general template of HTML code is used to render a form in the body of a page:
<!-- Declare start of form --> <FORM METHOD="desired_method" ACTION="your_url_"> ... form element (and other HTML) tags and attributes here ... </FORM>
Forms provide a tremendous amount of power, flexibility, and functionality to the user, but you may have noticed that only three attributes for the <FORM> tag exist:
ENCTYPE
METHOD
How can only three attributes provide so much power? The answer lies in just what those three simple attributes can do.
These attributes are specified as follows and are described in this section:
<FORM METHOD="method_" ACTION="url_" ENCTYPE="form_content_encoding_">
ACTION Attribute The ACTION attribute is where the action really starts. Presumably, you're interested in using forms so that you can acquire data from the user and do something useful with it. The value of the ACTION attribute specifies a URL to a CGI script, ISAPI program, IDC file, or Active Server page that will take some action on the user-supplied input after it is posted to the server. The action could be accessing a database based on a user query, generating a product-mailing request to your shipping department, running some other application programs, or simply mailing a message somewhere. The following code illustrates how an ACTION attribute is specified (don't worry about what the URL does at this point; that is covered in detail in Chapter 18,"The Common Gateway Interface (CGI)"):
<FORM ACTION="http://www.omniscient.com/cgi-bin/dosomething.exe">
ENCTYPE Attribute The ENCTYPE attribute simply specifies the type of encoding to be used for the form contents (the input object field names and the values a user enters in these fields) when they are submitted to the server for processing. In most cases, this encoding is performed to ensure that information is passed to the server without values or characters being dropped, modified, translated, or otherwise misinterpreted. The default encoding for all forms follows:
<FORM ENCTYPE="application/x-www-form-urlencoded">
ftp://ftp.merit.edu/documents/rfc/rfc1590.txt
The METHOD attribute can take one of two values: GET or POST. When a form submits data to the server, it can do so by using one of these two methods. The method specified determines how user input to a form is passed to an application, which then does some additional processing based on the values of that input. (The specifics of the GET and POST methods are covered in more detail in Chapter 18.)
You can specify the METHOD attribute (using POST, in this case) as this example shows:
<FORM METHOD="POST">
Note that the value for METHOD (GET or POST) is not case sensitive and can be specified in lowercase or uppercase.
You use the <INPUT></INPUT> tag pair to render user-input objects for collecting data or information from the user for subsequent processing or action. Input objects include radio buttons, checkboxes, text-entry fields, images, and buttons. Input to these objects typically is passed to the server for some processing after a special form of user input, the Submit button, is clicked. The general minimal template of HTML code used to render a user-input object in a form follows:
<INPUT TYPE="type" NAME="name" VALUE="value" >
The <INPUT> tag has six attributes, which are described in this section:
CHECKED
NAME
SIZE
MAXLENGTH
TYPEVALUE
You use the CHECKED attribute with radio buttons and checkboxes to specify that the initial state is displayed as being selected. The following code snippet displays two checkboxes on a single line:
<INPUT TYPE="checkbox" NAME="cb1" VALUE="selection1"> <INPUT TYPE="checkbox" NAME="cb2" VALUE="selection2" CHECKED>
The second checkbox will be rendered with a checkmark in the box, indicating that it is the initially selected value of the values presented. NAME Attribute The NAME attribute value identifies to the server from which user-input object a given input value originated. Additionally, common NAME values are used to group name/value pairs for sets of radio buttons when this information is passed to the server. To render a two-option radio button pair with the first selection set as the default, for example, you could use this general code:
<INPUT TYPE="radio" NAME="wid1" VALUE="selection1" CHECKED> <INPUT TYPE="radio" NAME="wid2" VALUE="selection2">
SIZE and MAXLENGTH Attributes The SIZE and MAXLENGTH attributes pertain only to TEXT (not TEXTAREA) type objects. You use MAXLENGTH to set the maximum length, in characters, of the text that can be input to the object. SIZE simply specifies the width, in characters, of the text object displayed on the form. The SIZE and MAXLENGTH attributes typically are used with a text-entry field, as in this example:
<INPUT TYPE="text" NAME="uname" SIZE="50" MAXLENGTH="80">
The TYPE attribute value specifies the type of input object or field
to render in the form. Table 11.2 lists these values.
Table 11.2. TYPE Attribute Values.
| Attribute | Function |
| CHECKBOX | Specifies checkbox input objects that allow more than one option to be selected from those presented. |
| HIDDEN | Presets values in a form. No user input is rendered; therefore, no user input is possible. |
| IMAGE | Specifies an imagemap as an input field. The user provides input by clicking a location on the image. Using the IMAGE type performs the same function as clicking the Submit button. Names and user-supplied values for all user-input objects in the form are passed to the server, along with image x,y coordinates of the mouse-click location. |
| PASSWORD | Specifies a single-line, text-entry object that does not echo user input to the screen (typically, asterisks are displayed for each character typed). |
| RADIO | Specifies radio buttons that force a single choice from the set of mutually exclusive options presented. |
| RESET | Renders a button that clears any user input from the form objects and restores default values. |
| SUBMIT | Renders a button that submits the form for the processing specified by the ACTION attribute in the <FORM> tag. Name/value pairs for all user-input objects in the form are passed to the server. |
| TEXT | Specifies a single-line, text-entry object. |
You use the VALUE attribute to preset the initial value of an object instance. If the user does not change the initial value, this is the value passed after he or she clicks the Submit button. For object types such as TEXT, which can have their values displayed, this is also the initial value displayed. To preset text that appears in a text-entry field, for example, you could use this code:
<INPUT TYPE="text" NAME="tid" VALUE="Your_Text_Here">
Two additional attributes, SRC and ALIGN, are used solely with the IMAGE attribute. (Because these attributes are used only with the IMAGE attribute and are not strictly attributes for the <INPUT> tag, they were not listed in Table 11.2.)
SRC specifies a path to where the image file to be rendered resides. ALIGN aligns an image relative to text that accompanies it. Possible values are top, bottom, and center. You can use the IMAGE input type to perform a SUBMIT, which is similar to using the SUBMIT input type. You can use the following code to enable users to submit the form by clicking an image on the form:
... preceding form code ... Submit the form by clicking on the bingo card image below and you will be automatically registered in a drawing to win a free TV:<BR> <INPUT TYPE="image" Src="http://www.omniscient.com/images/bingo_card.gif" Align="bottom"> ... remainder of form code ...
You then can use the coordinates of the mouse click on the image to assign the user a random number for a promotional drawing--in this case, for a free TV. <OPTION> Tag You use an <OPTION></OPTION> tag pair to specify each selection in a selection list. You use this tag pair only within the <SELECT></SELECT> tag pair. The general HTML code required to place selections in a selection-list object follows:
<OPTION SELECTED NAME="name1" VALUE="value1">Selection _ </OPTION> <OPTION NAME="name2" VALUE="value2">Selection_2 </OPTION> ... <OPTION NAME="nameN" VALUE="valueN">Selection N /OPTION>
There are two OPTION attributes:
VALUE
SELECTED Attribute You use the SELECTED attribute to specify which option in the list of selections is selected initially. In the following code, the second option in the list is preselected when the list is rendered:
<OPTION SELECTED NAME="name1" VALUE="value1">Selection1 </OPTION> <OPTION NAME="name2" VALUE="value2" SELECTED>Selection 2 </OPTION> ... <OPTION NAME="nameN" VALUE="valueN">Selection N </OPTION>
You use the VALUE attribute to set the value that will be passed to the server when an option in the list is selected. If no value is specified, the text following the <OPTION> tag is passed instead. In the following code, the value "value1" is sent to the server after the user clicks the Submit button:
<OPTION NAME="name1" VALUE="value1">Selection1 1</OPTION>
In the following code, the value "Selection1" is sent to the server after the user clicks the Submit button:
<OPTION NAME="name1">Selection 1 </OPTION>
You use the <SELECT></SELECT> tag pair to render user-input objects that enable the user to make one or more selections from a list of options presented. The SELECT input object is rendered as a pull-down menu or scrollable list, depending on how the attributes are set. User selections from these objects are passed to the server for processing after the Submit button is clicked. The <SELECT> tag is used with the <OPTION> tag. The general template of HTML code used to render a selection-list object in a form follows:
<SELECT NAME="desired name"> <OPTION VALUE="value1">Value1</OPTION> <OPTION VALUE="value2">Value2</OPTION> ... other <OPTION> statements here ... </SELECT>
There are two SELECT attributes:
SIZE
NAME Attribute The NAME attribute value identifies to the server from which user-input object--in this case, a list of selections--a given selection value(s) originated. You can use the following code, for example, when rendering a selection list named dbase:
<SELECT NAME="dbase">
SIZE Attribute You use the SIZE attribute value to specify the number of selections that are visible in the list when it is rendered on the form.
If the SIZE attribute is not specified or is given a value of 1, the selection-list object will be a pull-down menu. A pull-down menu always is initially rendered with a single selection visible, and it expands to show all selection options after the user clicks the pull-down menu button. For SIZE values greater than 1, the selection-list object is rendered as a scrollable list of options with SIZE number of options visible in the scrollable area.
By default, users are limited to single selections from a selection list. If you use the MULTIPLE attribute when creating a selection list, the user can select more than one option from the list. All options selected are passed to the server after the user clicks the Submit button.
Listing 11.1 shows the general template of HTML code used to render a pull-down menu and a scrollable selection-list object in a form.
Listing 11.1. An HTML TemplateIllustrating How to Create Pull-down Menu and Scrollable List Objects.
<!-- create single-selection pull-down menu of selections --> <SELECT NAME="desired name" SIZE="1"> <OPTION VALUE="value1">Value1</OPTION> <OPTION VALUE="value2">Value2</OPTION> ... other <OPTION> statements here ... </SELECT> <!-- create multiple-selection scrollable list of selections --> <SELECT NAME="desired name" MULTIPLE SIZE="#_of_visible_items"> <OPTION VALUE="value1">Value1</OPTION> <OPTION VALUE="value2">Value2</OPTION> ... other <OPTION> statements here ... </SELECT>
You use the <TEXTAREA></TEXTAREA> tag pair to render a user-scrollable, text-input object that enables users to enter multiple lines of freeform text.
Three attributes are associated with the TEXTAREA tag:
ROWS
COLS
The NAME attribute value identifies to the server in which user input object the text was written. You can use the following code, for example, to render a one-column by one-row freeform text field with the name "address":
<TEXTAREA NAME="address"></TEXTAREA>
ROWS and COLS Attributes The ROWS and COLS attribute values specify the dimensions (in number of characters) of the text-display area. These values do not limit text entry, because the object is rendered with scrollbars that enable the user to easily traverse through text not displayed in the window area. The following code renders a freeform, text-input object with a display area of 4 rows by 40 columns:
<TEXTAREA NAME="address" ROWS="4" COLS="40"></TEXTAREA>
Lines of text longer than 40 characters still are accepted, but they do not wrap to the next line unless the user explicitly presses Enter.
As previously mentioned, HTML forms provide the means by which users can interact with applications and services--such as databases--that you intend to provide at your Website. It therefore is important that you gain a solid understanding of how to create these forms with user-input objects such as text fields, scrolling textboxes, radio buttons, checkboxes, and various selection lists and menus. This section presents a few code segments and figures to illustrate how to develop these form elements.
Consider the previous Pizza Parlor form (refer to Figure 11.1). Listing 11.2 shows an example.
Listing 11.2. An HTML template illustrating how a form is created on a page.
<!-- Declare start of form --> <FORM METHOD="POST" ACTION="http://www.omniscient.com/cgi-bin/pizza.pl"> ... form element (and other HTML) tags and attributes here ... </FORM>
You can see that the form is rendered by using the POST method, as recommended for forms with multiple inputs. Additionally, the value of ACTION specifies the URL of a CGI script that presumably will process the customer's pizza order.
You can present selection lists in a form in two ways: by using scrolled lists and by using pull-down menus. Listing 11.3 demonstrates how each selection list is developed. Figure 11.2 shows the corresponding output for this program.
Listing 11.3. Two ways to create HTML selections lists.
<HTML> <HEAD> <TITLE>Creating a List Two Different Ways</TITLE> </HEAD> <BODY> <CENTER> <H2>Two Ways to Create a Selection List on a Form</H2> </CENTER> <HR> <!-- Declare start of form (action does nothing) --> <FORM METHOD="POST" ACTION=""> <!-- this scrolled-list allows multiple choices --> <H3><EM>Multiple Selection Scrolled List</EM></H3> <P> <SELECT NAME="spectrum" MULTIPLE SIZE="8"> <OPTION VALUE="blk" SELECTED>Black <OPTION VALUE="wht">White <OPTION VALUE="red">Red <OPTION VALUE="yel">Yellow <OPTION VALUE="grn">Green <OPTION VALUE="org">Orange <OPTION VALUE="brn">Brown <OPTION VALUE="pur">Purple <OPTION VALUE="sil">Silver <OPTION VALUE="au">Gold </SELECT> </P> <P> <!-- this pull-down menu allows one selection --> <CENTER> <H3><EM>Single Selection Pulldown</EM></H3> <SELECT NAME="spectrum" SIZE="1"> <OPTION VALUE="blk">Black <OPTION VALUE="wht">White <OPTION VALUE="red">Red <OPTION VALUE="yel">Yellow <OPTION VALUE="grn" SELECTED>Green <OPTION VALUE="org">Orange <OPTION VALUE="brn">Brown <OPTION VALUE="pur">Purple <OPTION VALUE="sil">Silver <OPTION VALUE="au">Gold </SELECT> </CENTER> </P> </FORM> <HR> <ADDRESS> <A HREF="http://www.omniscient.com/ ">Omniscient Home Page</A> <A HREF="mailto:dkittel@clark.net">E-Mail: dkittel@clark.net</A> </ADDRESS> </BODY> </HTML>
FIGURE 11.2. A scrolled list and a pull-down menu on a form.
You should note a few things about the form in Figure 11.2. First, don't worry about the blank URL or lack of a Submit input button. These were omitted so that you can concentrate on the code for creating selection lists. Second, I generally set the VALUE attribute for each option entry explicitly. For example, I typically use the following code:
<OPTION VALUE="blk">Black
instead of this code:
<OPTION>Black
I've found that this practice provides a better level of control when coding server-side applications using CGI.
Radio buttons and checkboxes are handy ways of acquiring user input when the user can select from only a few options. When the user is allowed to select more than one option, you should use a set of checkboxes. When the set of options is mutually exclusive and the user must choose one option, however, radio buttons force the user to make only a single selection.
Listing 11.4 demonstrates how radio buttons and checkboxes are developed as part of a form. Figure 11.3 shows the corresponding output for this program.
Listing 11.4. Using radio buttons and checkboxes in your form.
<HTML> <HEAD> <TITLE>Radio Button and Checkbox Example</TITLE> </HEAD> <BODY> <h2 align="center">WHIT Radio's Drive Time Survey</h2> </CENTER> <HR> <!-- Declare start of form --> <FORM METHOD="POST" > <P> <EM><STRONG>What is your primary mode of transportation?</STRONG></EM> <!-- Use radio buttons for mutually exclusive choices --> </P> <P> <INPUT TYPE="radio" NAME="trans" VALUE="CAR" CHECKED> Car <BR> <INPUT TYPE="radio" NAME="trans" VALUE="BUS"> Bus <BR> <INPUT TYPE="radio" NAME="trans" VALUE="SUB"> Subway <BR> <INPUT TYPE="radio" NAME="trans" VALUE="FOOT"> Foot </P> <P> <EM><STRONG>What are your favorite types of music?</STRONG></EM> </P> <P> <!-- use checkboxes for multiple choices --> <INPUT TYPE="checkbox" NAME="music1" VALUE="ROCK"> Rock <BR> <INPUT TYPE="checkbox" NAME="music2" VALUE="OLDIES"> Oldies <BR> <INPUT TYPE="checkbox" NAME="music3" VALUE="EASY"> Easy Listening <BR> </P> </FORM> <HR> <ADDRESS> <A HREF="http://www.omniscient.com">Omniscient Home Page</A><BR> <A HREF="mailto:dkittel@clark.net">E-Mail: dkittel@clark.net</A> </ADDRESS> </BODY> </HTML>
FIGURE 11.3 Using radio buttons and checkboxes on a form.
In this example, notice that the radio buttons were used to acquire user input from a set of options when just one response was desired. Additionally, as a brief note on form design, the "Car" option was preset as the default, because I assumed that this would be the primary selection for the multitude of respondents to this drive-time survey. This default setting saves the user only one mouse click, but it's a good idea to keep things as easy as possible for the user when presenting more complex forms. Also, notice how using checkboxes enables the user to submit more than one favorite type of music. Finally, you'll see that the form presented is not too useful, because no Submit input button is available, and no ACTION URL was specified in the HTML code.
Using TEXT input fields and freeform TEXTAREA objects provides a great deal of flexibility when designing forms for acquiring input such as e-mail addresses, postal addresses, names, descriptive information, or common identifying numbers (such as telephone numbers, birth dates, Social Security numbers, or credit card numbers) from users. These and other types of user information critical to building comprehensive database queries, supporting electronic commerce applications and transactions, or providing online technical support cannot be appropriately acquired by using scroll lists, pull-down menus, radio buttons, and checkboxes. Just imagine having to develop an HTML form with radio buttons or a scrollable list of all possible e-mail addresses or Social Security numbers (and imagine how long it would take users to find and select their appropriate entries in that list!).
Listing 11.5 demonstrates how TEXT and TEXTAREA input elements are developed as part of a form. Figure 11.4 shows the corresponding output for this program.
Listing 11.5. Using TEXT and TEXTAREA input elements in your form.
<HTML> <HEAD> <TITLE>Using TEXT and TEXTAREA Form Elements</TITLE> </HEAD> <BODY> <!-- Declare start of form --> <FORM METHOD="POST" ACTION=""> <!-- Create a text area object --> <P> <STRONG>A prefilled, 4 Row x 40 Column TEXTAREA INPUT Element</STRONG><BR> <TEXTAREA NAME="freeform" ROWS="4" COLS="50"> This is just a brief bit of initial, freeform text put in to show the functionality of the TEXTAREA element. Note the scrollability in the horizontal and vertical directions. </TEXTAREA> </P> <!-- Create various types of INPUT objects --> <P> <STRONG>Please enter your password (10 char maximum):</STRONG> <INPUT TYPE="PASSWORD" NAME="passwd" SIZE="12" MAXLENGTH="10"> </P> <P> <STRONG>A few sample text-input objects (note scrolling of first)</STRONG><BR> <STRONG>User Input:</STRONG> < INPUT TYPE="text" NAME="text1" SIZE="20" MAXLENGTH="80"><BR> <STRONG>Larger User Input:</STRONG> <INPUT TYPE="text" NAME="text2" SIZE="60" MAXLENGTH="80"> </P> <!-- "multipart" text input --> <P> <STRONG>Enter the ISBN for your favorite book: </STRONG> <INPUT TYPE="text" NAME="ccn1" SIZE="1" MAXLENGTH="1"> - <INPUT TYPE="text" NAME="ccn2" SIZE="5" MAXLENGTH="3"> - <INPUT TYPE="text" NAME="ccn3" SIZE="7" MAXLENGTH="5"> - <INPUT TYPE="text" NAME="ccn4" SIZE="1" MAXLENGTH="1"> </P> <P> <INPUT TYPE="submit" VALUE="Send this info"> <INPUT TYPE="reset" VALUE="Clear Entries"> </P> </FORM> <HR> <ADDRESS> <A HREF="http://www.omniscient.com">Omniscient Home Page</A><br> <A HREF="mailto:dkittel@clark.net">E-Mail: dkittel@clark.net</A> </ADDRESS> </BODY> </HTML> <HTML>
FIGURE 11.4 Using TEXT and TEXTAREA elements on a form.
This example is much busier than the other examples so far in this chapter, and there is much to point out about it.
The TEXTAREA object demonstrates how you can initialize text for user validation or modification. Also, because the display window is somewhat small, scrollbars are included so that the user can enter or scroll through large text segments.
The code in Listing 11.5 includes an example of the PASSWORD input type to show that it does indeed mask the user's input. Using password fields is an obvious means of implementing an additional level of security, because passwords allow only privileged users to access your databases or applications.
The two TEXT input objects with different SIZE attribute values (but the same user input string of characters) demonstrate that the text will scroll until the MAXLENGTH value is reached.
You also can create logically grouped "sets" of TEXT input objects that can be used for accepting user input that consists of multiple parts--such as phone numbers, Social Security numbers, dates (for example, mm-dd-yyyy format), and so on.
Even though the form in Figure 11.4 doesn't do anything (note the blank ACTION URL), I included the SUBMIT and RESET INPUT types anyway just to show how they are rendered on the form. Clicking the Clear Entries button causes all user entries to be cleared. User modifications to the prefilled TEXTAREA are removed, and the area is returned to its initial state. Clicking the Send This Info button causes the browser to attempt to submit this information to the server, which results in an error message because no URL is found.
This section is really predicated on what is perceived as a limitation. I must warn you that the information presented in this section is somewhat biased. Developing a great deal of code in windowing environments, such as the X Window System, has led me to be somewhat spoiled by the functionality and level of control provided by these development environments. But, to be fair, I also realize that HTML is not and was not designed to be a true programming language. It has no concept of loops, conditional flow control, subroutines and libraries, data types, and all the other things that make a programming language a programming language. This is a mixed blessing, because it means that some neat functionality is lost. The gains in ease and rapidity of interface development, improved maintainability, debugging, and testing--not to mention how easy HTML is to learn--far outweigh what is lost, however.
This section presents what I perceive to be some limitations in developing user interfaces by using only HTML, as well as some ideas to circumvent these limitations. I don't provide examples of these solutions in this chapter, because they are presented in later chapters after some additional concepts and development methods are covered.
HTML lacks the capability to provide a fine level of control over placement of user-input objects on a form. Here are some methods you can use to address this drawback:
This snippet of code, for example, creates a vertically aligned group of six checkboxes:
1<INPUT TYPE="checkbox" NAME="c1" VALUE="1"> 2<INPUT TYPE="checkbox" NAME="c2" VALUE="2"> 3<INPUT TYPE="checkbox" NAME="c3" VALUE="3"> 4<INPUT TYPE="checkbox" NAME="c4" VALUE="4"> 5<INPUT TYPE="checkbox" NAME="c5" VALUE="5"> 6<INPUT TYPE="checkbox" NAME="c6" VALUE="6">
You can encapsulate these lines of code in a <PRE> container tag to enforce some formatting:
<PRE> 1<INPUT TYPE="checkbox" NAME="c1" VALUE="1"> 2<INPUT TYPE="checkbox" NAME="c2" VALUE="2"> 3<INPUT TYPE="checkbox" NAME="c3" VALUE="3"> 4<INPUT TYPE="checkbox" NAME="c4" VALUE="4"> 5<INPUT TYPE="checkbox" NAME="c5" VALUE="5"> 6<INPUT TYPE="checkbox" NAME="c6" VALUE="6"> </PRE>
This code results in two columns of checkboxes, with each column separated by four spaces vertically. The last row of checkboxes has an additional space between it and the preceding row.
You can use this method to align and group sets of similar or dissimilar input objects while using most of the formatting and spacing you want. I encourage you to experiment with this technique to fine-tune the appearance of your forms.
Unlike other user-interface environments, HTML provides no concept of a pop-up dialog box or the capability to dynamically react to user input without interacting with the server. You might want an OPTION list element to be populated with selections based on the user selecting a radio button, for example. You can emulate this functionality, but you must use multiple HTML forms, hidden variables, CGI or other server-side programming, saved state information, and new form generation to be presented to the user. Sometimes, you can emulate simple forms of this functionality by using links and references to named anchors in the same HTML document.
A much better solution to the problem of reacting to user input is to use client-side programs developed in VBScript or JavaScript. Chapters 12, "Introduction to Client-Side Web Application Development Using VBScript," 13, and 14 give you all the background necessary to extend the capabilities of your HTML forms by using VBScript and ActiveX controls.
Long forms require the user to scroll through many pages, which is not always desirable. Sometimes, you can handle this problem by using links and references to named anchors within the same HTML document. A simple implementation of this technique is demonstrated in the section "Forms That Support Electronic Commerce: The Malt Shop--An Online Store," later in this chapter.
For complex applications, the capability to jump among pages of forms while maintaining information about user input on previous pages requires multiple forms, hidden variables, CGI programming and interaction with the server, saved state information, and new forms generation to be presented to the user.
http://home.netscape.com/newsref/std/cookie_spec.html
HTML provides no concept of a subroutine. Through the judicious application of a technique called Server-Side Includes (SSIs), however, you can perform a certain degree of dynamic linking to HTML that is not in the current HTML document. In other words, the server includes HTML from a separate file in the current document at runtime. This capability could enable you to develop some standardized input-object sets that have a common look and feel as well as standard field names, object layouts, and so on. You then could reuse these includes in several applications. Here is the syntax:
<!--#include virtual="yourfilehere.txt" -->
The following code snippet, for example, creates a form with sets of user-input objects included by using SSIs:
<FORM METHOD="POST" ACTION="http://www.omniscient.com/cgi-bin/dosomething" <!--#include virtual="/rss/satellite_boxes_vertical.txt" --> ... other form input objects and HTML ... <!--#include virtual="/rss/name_text.txt" --> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET" VALUE="Reset"> </FORM>
In this example, the server inserts the contents of the files satellite_boxes_vertical.txt and name_text.txt at the point they occur in the HTML document. These files contain HTML code that renders a set of checkboxes and a set of text-input objects in a standard onscreen format that facilitates reuse in many applications. For example, the following provides the contents of the satellite_boxes_vertical.txt file:
AVHRR<INPUT TYPE="checkbox" NAME="avhrr" VALUE="avhrr"><BR> LANDSAT<INPUT TYPE="checkbox" NAME="landsat" VALUE="landsat"><BR> IRS<INPUT TYPE="checkbox" NAME="irs" VALUE="irs"><BR> SPOT<INPUT TYPE="checkbox" NAME="spot" VALUE="spot"><BR>
This file renders a standard set of checkboxes used to select a type of satellite(s) for queries in several applications I've developed.
So far in this chapter, you've seen how to implement different form elements and how to use them as an interface to an application. This section presents some commonsense tips and considerations for designing the layout of your own forms:
Now that you've seen some brief examples of how to create form elements using HTML, it's time to tie them all together to create forms that do something useful. This section presents more complex examples of developing forms. Here, you'll take a more comprehensive look at how to build user interfaces to applications and databases by using the HTML form elements presented in earlier sections. You'll look at three sample form applications:
Take the time to review the code used to generate these application front-end forms. You'll find a great deal of useful, practical information that you can adapt to your own applications.
Web.dB is a fictitious trade journal geared toward the professional development and technical interests of Web database developers. The publishers of Web.dB are interested in maintaining (and hopefully increasing) their readership and market share, so they've decided to establish a Website with information about their publication, sample articles, and an online survey and subscription-application form. Not only does this Website enable the publishers to reach a wider audience at a lower cost than conventional advertising, but it also enables them to capture reader-profile information they can use to provide readers with better service and more appropriate articles and information. The publishers can also use this information to better target potential advertisers. Listing 11.6 illustrates the use of TEXTAREA, SELECT, OPTION, and INPUT (TEXT as well as RADIO, SUBMIT, and RESET buttons). Figures 11.5 and 11.6 show the results of this code.
Listing 11.6. Using TEXTAREA, SELECT, OPTION, and INPUT.
<HTML> <HEAD> <TITLE>Web.dB Journal - Reader Survey and Subscription Application</TITLE> </HEAD> <BODY> <CENTER> <H2><EM>Web.dB</EM> - Reader Survey and Subscription Application</H2> </CENTER> <HR> <!-- Declare start of form --> <!-- Action URL simply sends a string of name/value pairs --> <!-- to be processed by the specified cgi program --> <FORM METHOD="POST" ACTION="http://www.omniscient.com/cgi-bin/elvin-magic.pl"> <!-- Create TEXT and TEXTAREA objects for name, e-mail, mail entry --> <!-- Use TABLE to provide a bit of formatting control --> <STRONG>Please provide the following personal information</STRONG> <EM>(Please fill all fields)</EM> <TABLE> <TR> <TD>Full Name: </TD> <TD><INPUT TYPE="text" NAME="uname" SIZE="50"></TD><BR> </TR> <TR> <TD>E-Mail: </TD> <TD><INPUT TYPE="text" NAME="email" SIZE="50"></TD></BR> </TR> <TR> <TD>Mailing<BR>Address: </TD> <TD><TEXTAREA NAME="address" ROWS="5" COLS="50"></TEXTAREA></TD> </TR> </TABLE> <P> <STRONG>What is your company's main product/service</STRONG> (choose the most applicable)</BR> <!-- Use radio buttons to force mutually exclusive choices --> DB-Software <INPUT TYPE="radio" NAME="bus" VALUE="sw" CHECKED> Consulting <INPUT TYPE="radio" NAME="bus" VALUE="consult"> Engineering <INPUT TYPE="radio" NAME="bus" VALUE="engr"> Research <INPUT TYPE="radio" NAME="bus" VALUE="research"> ADP Services <INPUT TYPE="radio" NAME="bus" VALUE="adp"> </P> <P> <STRONG>What is your title?</STRONG> (choose the most applicable)</BR> <!-- Use radio buttons to force mutually exclusive choices --> President-CEO <INPUT TYPE="radio" NAME="title" VALUE="Pres" CHECKED> Manager <INPUT TYPE="radio" NAME="title" VALUE="Manager"> Designer <INPUT TYPE="radio" NAME="title" VALUE="Designer"> Programmer <INPUT TYPE="radio" NAME="title" VALUE="Programmer"> Analyst <INPUT TYPE="radio" NAME="title" VALUE="Analyst"> </P> <HR> <!-- these scrolled-lists allow multiple choices --> <!-- TABLE used to provide side-by-side formatting --> <STRONG>Please tell us about your development environment</STRONG> <EM>(Please select all that apply)</EM> <P> <TABLE NOBORDER> <TR> <TH>Languages</TH> <TH>Data Bases</TH> <TH>Describe Your Applications</TH> </TR> <TD> <SELECT NAME="cgidev" MULTIPLE SIZE="8"> <OPTION VALUE="Perl5" SELECTED>Perl 5.0 </OPTION> <OPTION VALUE="Magic">MAGIC </OPTION> <OPTION VALUE="Sybperl">SybPerl </OPTION> <OPTION VALUE="Oraperl">OraPerl</OPTION> <OPTION VALUE="C">C </OPTION> <OPTION VALUE="C++">C++</OPTION> <OPTION VALUE="Unix Shells">Unix Shells</OPTION> <OPTION VALUE="Python">Python</OPTION> <OPTION VALUE="REXX">REXX</OPTION> <OPTION VALUE="FORTRAN">FORTRAN</OPTION> </SELECT> </TD> <TD> <SELECT NAME="dbase" MULTIPLE SIZE="8"> <OPTION VALUE="Access" SELECTED>MS ACCESS</OPTION> <OPTION VALUE="Sybase">Sybase</OPTION> <OPTION VALUE="Oracle">Oracle</OPTION> <OPTION VALUE="FoxPro">FoxPro</OPTION> <OPTION VALUE="WDB">WDB</OPTION> <OPTION VALUE="Web-Genera">Web-Genera</OPTION> <OPTION VALUE="VAX DBMS">VAX DBMS</OPTION> <OPTION VALUE="DB2">DB2</OPTION> <OPTION VALUE="Informix">Informix</OPTION> <OPTION VALUE="RdB">RdB</OPTION> </SELECT> </TD> <TD> <TEXTAREA NAME="description" ROWS="8" COLS="50"></TEXTAREA> </TD> </TR> </TABLE> </P> <P> <STRONG> Do you currently develop/plan to develop Web-accessible databases?< /STRONG><BR> YES<INPUT TYPE="radio" NAME="dbyesno" VALUE="YES" CHECKED> NO<INPUT TYPE="radio" NAME="dbyesno" VALUE="NO"> </P> <P> <STRONG>Do you want to receive/continue to receive a free subscription to <EM>Web.dB</EM>?</STRONG><BR> <STRONG>YES!</STRONG><INPUT TYPE="radio" NAME="subscribe" VALUE="YES" CHECKED> NO<INPUT TYPE="radio" NAME="subscribe" VALUE="NO"> </P> <P> <INPUT TYPE="submit" VALUE="Send My Subscription Now!"> <INPUT TYPE="reset" VALUE="Clear Form Entries"> </P> </FORM> <HR> </BODY> </HTML> <HTML>
FIGURE 11.5. Page 1 of the survey and subscription form.
FIGURE 11.6. Page 2 of the survey and subscription form.
Requiring a user to scroll through lengthy forms might be perceived as a limitation of using HTML forms. In this case, however, the form has been laid out well, and the information it requests from the user is compact and succinct. Therefore, this form requires little scrolling by the user.
The ACTION attribute specifies a CGI routine that uses information collected from the form and passed to the routine. CGI is covered in detail in later chapters; I just want to point out that the data collected from users will be put to use.
The HTML TABLE element imposes a bit of formatting on the form TEXT and TEXTAREA elements. This provides a much better visual presentation by aligning the elements shown in Figure 11.5.
Finally, as a matter of good style, the informational request is laid out on the form in logical groups. The first part of the form requests personal information, and the remainder of the form focuses on technical information.
Convenience and time savings are increasingly important to everyone in today's fast-paced world. Wouldn't you take advantage of the opportunity to log onto the Web and do some quick shopping if it were quick, easy, and enabled you to do the other things you'd rather be doing? Or what about trying to purchase specialty items? Maybe no conventional stores in your area carry the items you want. Like it or not, electronic commerce is coming of age and will address these and other issues in the not-too-distant future; Web technologies are there to lend a hand.
In this example, you'll see how easy it is to create an interface to an online store--in this case, The Malt Shop, which is a home-brewing supply store. Customers can enter information to be processed and used to ship their orders, query and build databases, check inventories (and automatically order items for restock), order special products, and so on.
This example illustrates the use of TEXTAREA and INPUT (TEXT as well as RADIO, SUBMIT, and RESET buttons). It also demonstrates using named anchors within an HTML document to facilitate paging and navigating a form that has multiple pages (subforms) while still maintaining a single point of form submission.
Listing 11.7 creates the forms interfaces shown in Figures 11.7 through 11.11.
Listing 11.7. Creating The Malt Shop form interfaces.
<HTML>
<HEAD>
<TITLE>The Malt Shop Online Ordering</TITLE>
</HEAD>
<BODY>
<!-- place a named anchor so we can always get back home -->
<A NAME="MaltShopMain">
<CENTER>
<H1>Welcome to <EM>The Malt Shop</EM></H1>
</CENTER>
<HR>
<!-- Declare start of form -->
<!-- Action URL simply sends a string of name/value pairs -->
<!-- to be processed by the specified cgi program -->
<FORM METHOD="POST" ACTION="http://www.omniscient.com/cgi-bin/brewing.pl">
<H2>
<EM>The Malt Shop</EM> stocks to widest variety of high quality
brewing ingredients and supplies.
</H2>
<!-- note use of references within this doc. -->
<!-- named anchors allow users to navigate the document more easily -->
<H3>Browse Our Catalog Input Forms and Select From the
Finest Quality Ingredients</H3>
<EM>When you have completed filling in your order on the following pages
you may submit your order by completing the information on page 4.</EM>
<P>
<STRONG>CATALOG TABLE OF CONTENTS</STRONG>
<UL>
<LI><A HREF="#Malts"><STRONG>Page 1 - Malts and Kits
</STRONG></A></LI>
<LI><A HREF="#Yeasts-Hops"><STRONG>Page 2 - Yeasts and Hops
</STRONG></A></LI>
<LI><A HREF="#Supplies"><STRONG>Page 3 - Home Brewing Supplies
</STRONG></A></LI>
<LI><A HREF="#Shipping"><STRONG>Page 4 - Fill Out Shipping
Information/Send Order</STRONG></A></LI>
</UL>
</P>
<P>
<STRONG>Other Miscellaneous Stuff</STRONG>
<UL>
<LI><A HREF="recipes-links.html"><STRONG>Links to Some of Our Favorite
Home Brew Recipe Sites</STRONG></A></LI>
</UL>
</P>
<HR>
<A NAME="Malts"><H3>Dried Malts, Malt Extracts and Kits</H3>
<!-- TABLE provides good formatting -->
<TABLE BORDER="1">
<TR>
<TH>Malt Variety</TH>
<TH>Price per Unit</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD>MD Brand Light, 3 lb. bag, dried</TD>
<TD>$9.00</TD>
<TD><INPUT TYPE="text" NAME="mdlight1#" SIZE="4"></TD>
</TR>
<TR>
<TD>MD Brand Amber, 3 lb. bag, dried</TD>
<TD>$9.00</TD>
<TD><INPUT TYPE="text" NAME="mdamber1#" SIZE="4"></TD>
</TR>
<TR>
<TD>MD Brand Dark, 3 lb. bag, dried</TD>
<TD>$9.00</TD>
<TD><INPUT TYPE="text" NAME="mddark1#" SIZE="4"></TD>
</TR>
<TR>
<TD>EM Brand Light Extract, 3.3# lb. can</TD>
<TD>$10.75</TD>
<TD><INPUT TYPE="text" NAME="emdark1#" SIZE="4"></TD>
</TR>
<TR>
<TD>EM Brand Amber Extract, 3.3# lb. can</TD>
<TD>$10.75</TD>
<TD><INPUT TYPE="text" NAME="emdark1#" SIZE="4"></TD>
</TR>
<TR>
<TD>EM Brand Dark Extract, 3.3# lb. can</TD>
<TD>$10.75</TD>
<TD><INPUT TYPE="text" NAME="emdark1#" SIZE="4"></TD>
</TR>
<TR>
<TD>Kit of the Month, Premium Amber Bitters</TD>
<TD>$19.35</TD>
<TD><INPUT TYPE="text" NAME="kotm" SIZE="4"></TD>
</TR>
<TR>
<TD>Manager's Special, Cascades Bigfoot Ale Kit</TD>
<TD>$19.35</TD>
<TD><INPUT TYPE="text" NAME="mgrspec" SIZE="4"></TD>
</TR>
</TABLE>
<P>
<A HREF="#MaltShopMain">Back to Main Page</A><BR>
<A HREF="#Shipping">Submit Order</A>
</P>
<HR>
<A NAME="Yeasts-Hops"><H3>Yeasts and Hops</H3>
<!-- TABLE provides good formatting -->
<TABLE BORDER="1">
<TR>
<TH>Hops and Yeast</TH>
<TH>Price per Unit</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD>Saaz Hops, 1 oz., pellets</TD>
<TD>$1.85</TD>
<TD><INPUT TYPE="text" NAME="Saaz1" SIZE="4"></TD>
</TR>
<TR>
<TD>Saaz Hops, 5 oz., leaf plugs</TD>
<TD>$8.90</TD>
<TD><INPUT TYPE="text" NAME="Saaz5" SIZE="4"></TD>
</TR>
<TR>
<TD>Hallertau Hops, 1 oz., pellets</TD>
<TD>$1.85</TD>
<TD><INPUT TYPE="text" NAME="haller1" SIZE="4"></TD>
</TR>
<TR>
<TD>Fuggles Hops, 1 oz., pellets</TD>
<TD>$1.45</TD>
<TD><INPUT TYPE="text" NAME="fuggle1" SIZE="4"></TD>
</TR>
<TR>
<TD>Goldings Hops, 1 oz., pellets</TD>
<TD>$1.45</TD>
<TD><INPUT TYPE="text" NAME="gold1" SIZE="4"></TD>
</TR>
<TR>
<TD>Sudz Bavarian Pilsner<BR>Liquid Yeast Culture</TD>
<TD>$4.25</TD>
<TD><INPUT TYPE="text" NAME="bavpil" SIZE="4"></TD>
</TR>
<TR>
<TD>Sudz Special London Ale<BR>Liquid Yeast Culture</TD>
<TD>$4.25</TD>
<TD><INPUT TYPE="text" NAME="splondon" SIZE="4"></TD>
</TR>
<TR>
<TD>Edme Ale Yeast, 5 gm dried</TD>
<TD>$1.00</TD>
<TD><INPUT TYPE="text" NAME="edale" SIZE="4"></TD>
</TR>
</TABLE>
<P>
<A HREF="#MaltShopMain">Back to Main Page</A><BR>
<A HREF="#Shipping">Submit Order</A>
</P>
<HR>
<A NAME="Supplies"><H3>Home Brewing Supplies</H3>
<!-- TABLE provides good formatting -->
<TABLE BORDER="1">
<TR>
<TH>Miscellaneous Brewing Supplies</TH>
<TH>Price per Unit</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD>6.7 gal. Plastic Fermenting Bucket</TD>
<TD>$11.85</TD>
<TD><INPUT TYPE="text" NAME="fbucket" SIZE="4"></TD>
</TR>
<TR>
<TD>5.6 gal. Plastic Bottling Bucket<BR>(w/spigot)</TD>
<TD>$11.85</TD>
<TD><INPUT TYPE="text" NAME="bbucket" SIZE="4"></TD>
</TR>
<TR>
<TD>Bottle Caps, 100 cnt.</TD>
<TD>$2.00</TD>
<TD><INPUT TYPE="text" NAME="caps" SIZE="4"></TD>
</TR>
<TR>
<TD>Airlocks</TD>
<TD>$2.00</TD>
<TD><INPUT TYPE="text" NAME="alock" SIZE="4"></TD>
</TR>
<TR>
<TD>Hydrometer, 10", triple scale</TD>
<TD>$5.25</TD>
<TD><INPUT TYPE="text" NAME="hydrom" SIZE="4"></TD>
</TR>
<TR>
<TD>Racking Tube, 6 ft. section</TD>
<TD>$2.00</TD>
<TD><INPUT TYPE="text" NAME="rtube" SIZE="4"></TD>
</TR>
<TR>
<TD>12, 16, 24, 32 oz. bottles</TD>
<TD>CALL!</TD>
<TD></TD>
</TR>
</TABLE>
<P>
<A HREF="#MaltShopMain">Back to Main Page</A><BR>
<A HREF="#Shipping">Submit Order</A>
</P>
<HR>
<A NAME="Shipping"><H3>Shipping Information</H3>
<STRONG>Please provide the following shipping information</STRONG>
<EM>(Please fill all fields)</EM>
<!-- Create TEXT and TEXTAREA objects for name, mail entry -->
<!-- Use TABLE to provide a bit of formatting control -->
<TABLE>
<TR>
<TD>Full Name: </TD>
<TD><INPUT TYPE="text" NAME="uname" SIZE="50"></TD><BR>
</TR>
<TR>
<TD>Mailing<BR>Address: </TD>
<TD><TEXTAREA NAME="address" ROWS="5" COLS="50"></TEXTAREA></TD>
</TR>
</TABLE>
<P>
<STRONG>Method of payment?</STRONG></BR>
<!-- Use radio buttons to force mutually exclusive choices -->
Credit Card <INPUT TYPE="radio" NAME="pymt" VALUE="cc" CHECKED>
Check/Money Order <INPUT TYPE="radio" NAME="pymt" VALUE="chmo">
<EM>Malt Shop</EM> Account<INPUT TYPE="radio" NAME="pymt" VALUE="msaccnt">
</P>
<P>
<STRONG>Method of shipment?</STRONG></BR>
<!-- Use radio buttons to force mutually exclusive choices -->
U.S Mail <INPUT TYPE="radio" NAME="shpmnt" VALUE="usmail" CHECKED>
Magic Overnight Delivery <INPUT TYPE="radio" NAME="shpmnt" VALUE="overnight">
Magic 2-Day Express <INPUT TYPE="radio" NAME="shpmnt" VALUE="twoday">
</P>
<P>
<STRONG>Do you want to be placed on our mailing list?</STRONG><BR>
<STRONG>YES!</STRONG><INPUT TYPE="radio" NAME="subscribe" VALUE="YES" CHECKED>
NO<INPUT TYPE="radio" NAME="subscribe" VALUE="NO">
</P>
<P>
<INPUT TYPE="submit" VALUE="I'm Gettin' Thirsty - Send My Order Now!">
<INPUT TYPE="reset" VALUE="Clear Form Entries">
</P>
</FORM>
<HR>
</BODY>
</HTML>
FIGURE 11.7. The Malt Shop online store home page.
FIGURE 11.8. Page 1 of The Malt Shop online order form.
FIGURE 11.9. Page 2 of The Malt Shop online order form.
FIGURE
11.10. Page 3 of The Malt Shop online
order form.
FIGURE
11.11.Page 4 of The Malt Shop online order form.
In the Web.dB example, you saw that scrolling through a short form isn't a great burden to the user. The Malt Shop example, by contrast, demonstrates a case where requiring the user to scroll through several pages would result in a form that was neither quick nor easy to use. In a full-fledged application (one with a few hundred pages of a catalog and/or items listing), scrolling clearly is not an option. To overcome this dilemma, I used links and references to named anchors within the HTML document to permit the user to "page to" certain locations within the form, and I required only one submission. Linking to external HTML documents or forcing the user to perform multiple submissions was not required. Additionally, I logically grouped contents presented on each page so that users easily can find what they want. You can extend these concepts to provide greater functionality in full-fledged applications.
The ACTION attribute specifies a CGI routine that uses the information collected from the form and passed to the routine. This routine may perform checks against an inventory database, generate shipping information to a warehouse, generate and return an invoice and total cost information for the user's approval before finalizing the sale, and so on. Using CGI routines is covered in great detail in Chapter 18 and Chapter 19.
I used the HTML TABLE element to impose a bit of formatting on the form TEXT elements used to present product information and order-quantity input fields, as shown in Figures 11.9 through 11.11. This element gives the order form a well-organized spreadsheet look and feel with which many users are accustomed.
Order forms of this type lend themselves well to automatic, on-the-fly generation techniques. In other words, instead of using static HTML forms that quickly can become outdated and require extensive revisions, the HTML used to render the form is created dynamically by the server using a database of product and price information to generate the page content. Generating forms dynamically using database-access methods and programs to generate HTML can substantially reduce the number of lines of HTML code you must write, and it also provides a tremendous amount of flexibility for when product lines, pricing, and other ordering information change. This concept is explored in more depth in later chapters, beginning with Chapter 18 and continuing with examples throughout the remainder of the book.
Finally, you can see that developing forms can become pretty involved for more substantial applications. I don't want to give you the impression that this development is difficult, though, because it isn't. In fact, this example illustrates just the opposite and points out one of the major benefits of HTML: just how good it is as a rapid prototyping and development tool. This example took less than one hour to code.
Finally, here is an example that addresses the meat of this book: giving people access to distributed data and information from databases they ordinarily would not be able to access. Thousands of people, companies, organizations, agencies, and institutions around the world want you to have easy access to their databases and repositories of information. Many of them, particularly government agencies, are developing Websites to provide that access at no cost. Some of these sites (intranets) are for use only by users internal to an organization, whereas other sites are for use by the public. Still other information and data providers seek to provide their information for a profit--by charging users for information accessed or by charging others a fee for posting the information.
Honest Abe's Used Auto Search (yet another fictitious company) falls into the latter category. Abe maintains a database of used vehicles and sellers for which he charges the seller a fee to be listed in the database. Abe then gives the used-auto buying public the capability to perform directed searches of the database. The form used by Abe's Website enables the user to structure a query and obtain information on vehicles that meet the buyer's preferences.
This example illustrates the use of TEXTAREA, SELECT, OPTION, and INPUT (text; checkboxes; and radio, submit, and reset buttons). Listing 11.8 creates the form interfaces shown in Figures 11.12 and 11.13. Figure 11.14 shows a sample of search results.
Listing 11.8. Honest Abes Used Auto Search interface.
<HTML> <HEAD> <TITLE>Honest Abe's Used Auto Search Service</TITLE> </HEAD> <BODY> <CENTER> <H1>Honest Abe's Used Auto Search</H1> </CENTER> <p align="center"><em><strong>No Lemons, No Shysters, No Foolin'!</strong></em> <img src="images/okhandjpg" align="middle" hspace="10" width="32" height="51"></p> <HR> <!-- Declare start of form --> <!-- Action URL simply sends a string of name/value pairs --> <!-- to be processed by cgi program that queries a used car <!-- database --> <FORM METHOD="POST" ACTION="http://www.omniscient.com/cgi-bin/carquery.pl"> <P> <H3>Fill out the following questionnaire and we will use the information to search our extensive database of used car listings. <EM>If we don't list it, it doesn't exist!</EM></H3> </P> <P> <STRONG>What used vehicles are you interested in?</STRONG> <EM>(Select all vehicles of interest from the following lists)</EM><BR> <!-- These scrolled lists allow multiple choices --> <!-- Table used to provide formatting --> <CENTER> <TABLE NOBORDER> <TR> <TH>Ford</TH> <TH>Toyota</TH> <TH>Specialty</TH> </TR> <TR> <TD> <SELECT NAME="ford" MULTIPLE SIZE="4"> <OPTION VALUE="escort" SELECTED>Escort</OPTION> <OPTION VALUE="pinto">Pinto</OPTION> <OPTION VALUE="mustang">Mustang</OPTION> <OPTION VALUE="taurus">Taurus</OPTION> <OPTION VALUE="bronco">Bronco</OPTION> </SELECT> </TD> <TD> <SELECT NAME="toyota" MULTIPLE SIZE="4"> <OPTION VALUE="mr2" SELECTED>MR2</OPTION> <OPTION VALUE="camry">Camry</OPTION> <OPTION VALUE="celica">Celica</OPTION> <OPTION VALUE="forerunner">Forerunner</OPTION> <OPTION VALUE="tercel">Tercel</OPTION> </SELECT> </TD> <TD> <SELECT NAME="special" MULTIPLE SIZE="4"> <OPTION VALUE="rolls" SELECTED>Rolls Royce</OPTION> <OPTION VALUE="hv">HumVee</OPTION> <OPTION VALUE="modelt">Model T</OPTION> <OPTION VALUE="ferrari">Ferrari</OPTION> <OPTION VALUE="dl">DeLorean</OPTION> </SELECT> </TD> </TR> </TABLE> </CENTER> </P> <P> <STRONG>Color preference(s)</STRONG> <EM>(check all that apply)</EM> <BR> <INPUT TYPE="checkbox" NAME="c1" VALUE="wht">White<BR> <INPUT TYPE="checkbox" NAME="c2" VALUE="blk">Black<BR> <INPUT TYPE="checkbox" NAME="c3" VALUE="red">Red<BR> <INPUT TYPE="checkbox" NAME="c4" VALUE="blue">Blue<BR> <INPUT TYPE="checkbox" NAME="c4" VALUE="grn">Green </P> <P> <STRONG>What is your price range?</STRONG><BR> <!-- Use radio buttons to force mutually exclusive choices --> < <STRONG>$</STRONG>1000<INPUT TYPE="radio" NAME="range" VALUE="range1"> <STRONG>$</STRONG>1000-$2000<INPUT TYPE="radio" NAME="range" VALUE="range2"> <STRONG>$</STRONG>2000-$3000<INPUT TYPE="radio" NAME="range" VALUE="range3"> <STRONG>$</STRONG>3000-$4000<INPUT TYPE="radio" NAME="range" VALUE="range4"> <STRONG>$</STRONG>4000-$5000<INPUT TYPE="radio" NAME="range" VALUE="range5"> <STRONG>$</STRONG>5000+<INPUT TYPE="radio" NAME="range" VALUE="range6"> </P> <P> <STRONG>Model year(s) of interest</STRONG> <EM>(check all that apply)</EM> <BR> '88<INPUT TYPE="checkbox" NAME="yearc1" VALUE="88"> '89<INPUT TYPE="checkbox" NAME="yearc2" VALUE="89"> '90<INPUT TYPE="checkbox" NAME="yearc3" VALUE="90"> '91<INPUT TYPE="checkbox" NAME="yearc4" VALUE="91"> '92<INPUT TYPE="checkbox" NAME="yearc5" VALUE="92"> '93<INPUT TYPE="checkbox" NAME="yearc6" VALUE="93"> '94<INPUT TYPE="checkbox" NAME="yearc7" VALUE="94"> '95<INPUT TYPE="checkbox" NAME="yearc8" VALUE="95"> </P> <P> <STRONG>Please enter your Zip Code:</STRONG> <INPUT TYPE="text" NAME="zip" SIZE="6" MAXLENGTH="5"><BR> </P> <P> <STRONG>Find all matching vehicles in your</STRONG><BR> <!-- Use radio buttons to force mutually exclusive choices --> Local Area<INPUT TYPE="radio" NAME="location" VALUE="local"> State<INPUT TYPE="radio" NAME="location" VALUE=""> Region<INPUT TYPE="radio" NAME="location" VALUE="range2"> </P> <P> <STRONG>Order matches by</STRONG> <EM>(check all that apply)</EM><BR> <INPUT TYPE="checkbox" NAME="orderbymake" VALUE="make">Make <BR> <INPUT TYPE="checkbox" NAME="orderbymodel" VALUE="model">Model <BR> <INPUT TYPE="checkbox" NAME="orderbyyear" VALUE="year">Year <BR> <INPUT TYPE="checkbox" NAME="orderbyprice" VALUE="price">Price </P> <P> <!-- this pull-down menu allows one selection --> <STRONG>Maximum number of matches to return: </STRONG> <SELECT NAME="maxhits" SIZE="1"> <OPTION VALUE="ten" SELECTED>10</OPTION> <OPTION VALUE="twenty">20</OPTION> <OPTION VALUE="fifty">50</OPTION> <OPTION VALUE="hundred">100</OPTION> </SELECT> </P> <P> <INPUT TYPE="submit" VALUE="Submit Query"> <INPUT TYPE="reset" VALUE="Clear Form Entries"> </P> </FORM> <HR> </BODY> </HTML> <HTML>
FIGURE 11.12. Page 1 of Honest Abe's Used Auto Search form.
FIGURE
11.13 Page 2 of Honest Abe's Used
Auto Search form.
FIGURE
11.14. Sample search results from Honest
Abe's Used Auto Search.
I provided the user with some control over the order and volume of information to be returned as a result of the database query. I did so by providing checkboxes for the user to specify how the output should be ordered and an option list to indicate the maximum number of matches that should be returned. As a matter of form formatting style, the form presentation often is cleaner if sets of radio buttons and checkboxes consistently are rendered vertically or horizontally when it is possible to do so. I chose to mix things up in this example just to show the different ways to render these objects.
A very simple HTML form is used to give a user easy access to information in Abe's database. Even though the form was simple to develop and is easy to use, it enables the user to construct powerful queries and directed searches for specific information with a few simple inputs. This is one of the primary reasons why Web database development is a rapidly growing discipline.
A nice addition you could make to this example is a link from the query results page back to the query page. This would enable users to reformulate or refine a query if they weren't satisfied with the results of the current query. An even nicer modification would be to pre-fill the form with input (state information) from the original query so that the user doesn't have to fill out all the entries again.
The goal of this chapter was to give you everything you need to know to immediately start developing HTML forms for database access and application user interfaces. Throughout, proper development techniques were emphasized, and notes and tips were provided on using form elements.
You began by learning what forms are, looking at the many varieties of forms, and using HTML to employ forms as a user interface to a variety of applications, such as information collection and electronic commerce. You learned how to use forms to give users controlled access to your databases, regardless of the level of their technical knowledge, computer literacy, or even where those databases physically exist relative to the users.
Next, you saw a detailed summary and reference of the HTML elements and attributes used to develop form interfaces, including a description and use of each element, as well as the proper syntax used to render each element.
Through a variety of code and figure samples, you saw how each type of form element is developed and how it looks when rendered by a Web browser. Examples included form elements such as TEXTAREA; SELECT; OPTION; and the INPUT types of radio buttons, checkboxes, passwords, and text. You also looked at using INPUT types of SUBMIT and RESET to send information collected from users to the server or to clear entries from the form.
The three comprehensive, practical examples near the end of this chapter illustrated how to use forms as interfaces to a variety of applications to perform tasks such as accessing controlled databases, gathering information, and participating in electronic commerce.
