Forms | Dynamic HTML in Action

Forms allow interaction between a user and a server. The general concept is that the server displays a form to the user via a Web page, requesting any manner of information, such as name, address, phone number, age, and so on. The user then fills out the form and resubmits it to the server. A form can contain a variety of elements, ranging from text entry fields to check boxes and drop-down lists.

Let's take a look at a basic form in Code Listing 4-1, which is displayed in Figure 4-1, and break it down.

Code Listing 4-1.

<HTML> <HEAD> <TITLE>Listing 4-1</TITLE> </HEAD> <BODY> <H1>This page contains a form.</H1> <FORM NAME="F1" ACTION="http://ms.com/asp/prc.asp" METHOD="get"> <B>A text field follows.</B> <INPUT TYPE="Text" NAME="txtFld" VALUE="A text field" SIZE="25"> <BR><INPUT TYPE="submit"> </FORM> </BODY> </HTML>

The Form Tag

The FORM element defines the extent of the form. All of the interactive parts of a form (text fields, select boxes, and so on) should be placed between the opening and closing <FORM> tags. The <FORM> tag supports a number of attributes.

click to view at full size.

Figure 4-1. A basic form.

The <FORM> tag's NAME attribute gives the form a name. This makes it easier to access the data on the form and is especially useful when you have multiple forms on a page. The ACTION attribute specifies the URL to which the form should deliver its information when a user clicks the Submit button. In Code Listing 4-1, the form will be processed by a file named prc.asp that resides in the asp directory on the Web site ms.com. This site does not actually exist, and thus the form will generate an error when submitted. The type of file specified in the ACTION attribute depends on the type of server being run. Common Gateway Interface (CGI) applications are a common way of processing forms on most Web servers. Microsoft Internet Information Server (IIS) supports Active Server Pages (ASPs), an easy and powerful method of processing forms. Because of the highly server-dependent nature of server-side forms processing, this book will not go into the specifics of writing CGI programs or ASPs (although most of the information provided in the chapters on scripting can be applied to ASPs).

The METHOD attribute specifies how the form should be submitted to the server. There are two standard options: get and post. Get causes the form to act somewhat like an anchor tag. When submitted, the form will try to navigate to a location specified by the following, in the order shown:

the URL specified in the ACTION attribute

a question mark

the contents of the form expressed in name=value pairs

This is simpler than it sounds. For example, if a form has an ACTION of http://www .ms.com/asp/prc.asp and has a text field with the NAME of UserFirstName in which a user has entered the text John, the form will try to link to the location

 http://www.ms.com/asp/prc.asp?UserFirstName=John

The file prc.asp on the server will then take the text after the question mark (known as a query string) and process it as the contents of a form. The entire address (including the question mark and any name=value pairs) will be visible in the address bar of the user's browser. Some special characters might appear a bit strange in the address. For example, if you include an equal sign as part of a value, it appears as %3D. If the equal sign were transmitted as itself, it could be confused by the server as the equal sign in a name=value pair.

NOTE
Code Listing 4-1 will return an error message if you click the Submit button. To be processed, forms require a properly configured server that expects form submissions. There is no such server for the forms in this chapter. However, even though the forms in this chapter will return errors if submitted, it is still instructive to do so since it allows you to see the URL requested by the form upon submission.

The post value for the METHOD attribute allows an unlimited amount of data to be sent to the server. If you do this sort of form submission, you will not see the form's information in the address bar. Post is most useful with larger or more complex forms and with those in which you are trying to implement some level of security.

Which METHOD Should You Use?
Your choice of METHOD should be made based on several factors. First, although forms-processing software on most servers can handle both get and post submissions, some are restricted to one or the other. In these cases, your decision is made for you. The primary difference between the two methods is that get includes the form information as part of the URL in the address bar. This can be both an advantage and a disadvantage. A disadvantage is that many people find the form information ugly and distracting. Also, you might want to hide the form information from a user for security reasons. An advantage is that users can bookmark the results of the form submission because the bookmark is saved with the entire URL, including form contents. In addition, this information can give advanced users another method for navigating your site by keying in their own name=value pairs on the address line. If you need to submit a significant quantity of information, post is probably the better choice because get can transfer only a limited amount of information. This limit is typically around 1000 characters, though it varies.

The Input Tag

The form in Code Listing 4-1 contains two <INPUT> tags, one that displays as a text entry field and another that displays a Submit button. As you'll see, the <INPUT> tag is very flexible and allows you to include different types of input ranging from check boxes to text entries in a form. Code Listing 4-2 illustrates all the various TYPE attributes of the <INPUT> tag. Figure 4-2 shows how that code displays on the screen.

Every <INPUT> tag should contain a TYPE and a NAME attribute, and most will include a VALUE attribute. The TYPE attribute specifies what type of input will be requested from the user, such as a text box, check box, or radio button. The NAME attribute and the final contents of the VALUE attribute are sent to the server for processing when the form is submitted. Such information is known as a name=value pair. Other attributes vary with the input tag TYPEs, as you will see in the following paragraphs.

Setting a value of text for the TYPE attribute displays a single-line text entry field. This kind of field is useful for collecting such information as names and addresses from users. Input tags of TYPE text support a SIZE attribute, which specifies the visible width of the field. Additionally, you can use the MAXLENGTH attribute to establish the maximum number of characters allowed in the field and set the READONLY attribute to true to disable the field for user input. (Current versions of Netscape Navigator do not support the READONLY attribute.) The following tag would generate a text entry field 30 characters wide that would scroll as the user entered up to 100 characters.

Any initial value specified in the VALUE attribute will display by default in the text entry field. If a user replaces this information (as is likely), the contents of the VALUE attribute will be updated so that when the form is submitted it will contain the information specified by the user.

Setting a value of password for the TYPE attribute displays a single-line text entry field in which asterisks appear instead of the actual characters typed by the user. As you would expect, this setting is useful for obtaining information from the user that you don't want displayed in a readable format on the client side, such as passwords. Input tags of TYPE password support all the same attributes as those of TYPE text and behave identically, except in terms of character display.

Setting a value of check box for the TYPE attribute displays a standard check box. Adding the CHECKED attribute (just add the word CHECKED to the tag) results in a check box that is already checked. An input tag of TYPE check box is submitted with the form only if the check box is checked.

Setting a value of radio for the TYPE attribute displays a standard radio button. Adding the CHECKED attribute displays a radio button that is already selected. Typically, radio buttons are used to select one and only one choice from a number of alternatives. For this scenario, you should create multiple input tags of TYPE radio and give them the same NAME attribute, as seen in Code Listing 4-2. This combines the individual radio TYPEs into a single radio group and allows only one item in the group to be selected at a time. If a user selects one item, and then another, the first item will automatically deselect. The NAME of the radio group is submitted to the server with the value of the selected item. If no items are selected, no information from the radio group is submitted.

Setting a value of button for the TYPE attribute displays a button. Whatever is specified in the VALUE attribute is used as the text of the button. Buttons can perform actions through script. Scripting will be covered in Part 2.

Setting a value of file for the TYPE attribute displays a text entry field and a Browse... button. This TYPE of input tag allows users to find and specify files on their machines. (This TYPE of input tag is not supported in Microsoft Internet Explorer version 3 unless the user has installed the file upload add-on.) When the Browse... button is clicked, a standard Browse dialog box appears (the standard dialog box for the user's operating system) that lets the user graphically navigate the computer's file system. For security reasons, you cannot set a value for any input of TYPE browse.

Setting a value of hidden for the TYPE attribute results in an input that is not displayed. Hidden input tags are used to keep track of information that the user does not need to see. These TYPEs of input tags can be particularly beneficial when used in combination with scripting.

Setting a value of reset for the TYPE attribute displays a Reset button. A Reset button will return the form to its default state, meaning all the input fields will return to the conditions they were in when the form was first downloaded. If you specify a VALUE attribute for this tag, the text will be used for the text of the button instead of the default text, Reset. A name=value pair is not submitted for Reset buttons since they perform an action on the client side rather than carry data. The same is true for input tags of TYPEs submit and image, discussed next.

Setting a value of submit for the TYPE attribute displays a Submit button. When this button is clicked, the form is submitted. As with the Reset button, if you specify a VALUE attribute, that text will be used for the text on the Submit button instead of the default, Submit Query.

An alternative to using a Submit button is to use the value image for the TYPE attribute. This value displays an image that acts just like the Submit button, in that when it is clicked, the form is submitted. An <INPUT> tag that uses the image TYPE attribute supports two additional attributes: SRC and ALIGN. SRC defines the location of the image that should be displayed, and ALIGN specifies where the image should display relative to the text around it, just like the <IMG> tag.

The Text Area Tag

In addition to the <INPUT> tag, forms support a number of other interactive elements. The <TEXTAREA> tag allows for multi-line text input. Code Listing 4-3 demonstrates the <TEXTAREA> tag. Figure 4-3 displays the results.

<TEXTAREA> is similar to an <INPUT> of TYPE text in that it allows for text entry in a form. However, the <TEXTAREA> tag allows multiple lines of text to be entered. When the form is submitted, any text inside a TEXTAREA element is submitted as the value of the element. The text between the opening and closing tags of the element is displayed as the default text, as visible in Figure 4-3. This text and any changes made by the user are sent to the server for processing when the form is submitted.

You can set the size of the element with the COLS and ROWS attributes. COLS specifies the width of the TEXTAREA element in characters, while ROWS specifies the number of text lines a user can enter without needing to scroll. The WRAP attribute determines how the text wraps. In Internet Explorer 5, text is normally wrapped by default, while it is not normally wrapped in Netscape Navigator. A value of off turns off text wrapping; a value of soft or hard turns it on. The soft and hard values differ only in how they submit information to the server. Soft does not submit line breaks to the server, and hard submits line breaks as seen in the browser window. Internet Explorer also supports the READONLY attribute, which makes the text in the element non-editable, and the DISABLED attribute, which takes the READONLY attribute one step further by also graying out the element.

Select and Option Tags

The <SELECT> and <OPTION> tags allow for the creation of list boxes. Code Listing 4-4 demonstrates three list boxes. The results are displayed in Figure 4-4.

The <SELECT> tag supports two kinds of lists: standard (usually called drop-down) and multi-select. These are both shown in Figure 4-4. The extent of the list is defined by the SELECT element. Inside the SELECT element reside OPTION elements, each representing an item in the list. A closing </OPTION> tag is not necessary. The SELECT element supports a number of attributes. If you include the MULTIPLE attribute, the list box will allow multiple selections. With multi-select lists, users can press and hold the Ctrl key while they click each item they want; or they can click an item, press and hold the Shift key, and click a different item to select a range.

The SIZE attribute specifies the default number of rows that display. For standard lists, the default SIZE is 1, meaning only one line displays unless the user clicks the drop-down button, which then displays a scrollable list of items. If you set a standard list SIZE greater than 1, a scrolling list of options displays, from which one option can be selected. For multi-select lists, the default SIZE is 4. Changing this SIZE changes the number of items displayed.

Each OPTION element should have a VALUE attribute. When the form is submitted, the NAME of the SELECT element is included with the VALUEs of the selected items in the list as the name=value pairs. If multiple OPTIONS have been selected, each selection is submitted as part of its own name=value pair. If you include the SELECTED attribute in an OPTION element, that OPTION element becomes the default selected item in the list. Descriptive text follows each of the OPTION elements. This text is what the user sees in the drop-down list.

All of the elements above can be used in Internet Explorer, either inside a form or on their own. Current versions of Netscape Navigator, however, require that these elements live inside a FORM element; otherwise, they are not displayed as described above, but rather as simple text. For example, the descriptive text following the <OPTION> tags in a SELECT list will simply display as in-line text (like in a normal paragraph), rather than in a drop-down list.

Forms are tremendously practical. Many of their most powerful features, however, require knowledge of scripting. Scripting is covered in Part 2.