Forms

Web Forms

Web sites use forms to obtain input from users. You can place many different fields into one form for user input. Such input can include a user name, address or credit card number, for example. The information entered into a form is then submitted to a server where it is stored and/or processed.

To be truly functional, a form requires the use of a Common Gateway Interface (CGI) program to process the script. CGI is the de facto standard, but other technologies exist to process forms, such as Active Server Pages (ASP) and JavaServer Pages (JSP). CGI Common Gateway programs use server-side script. In contrast, client-side script is executed on the client. Interface (CGI)

A program that processes data A CGI script residing on a server performs two important functions: It receives data from submitted by the a Web browser, then it processes and formats the data. Without some sort of CGI script on the server, the server cannot receive the form data. Most CGI scripts do more than just receive data; they also remove extraneous information and format the data.

Many scripts, servers and utilities are available on UNIX, Macintosh and Windows process a form. platforms to simplify this process. Such scripting utilities are available commercially, or as freeware or shareware.

Submitting and resetting form data

Uploading or e-mailing form data is referred to as submitting a form. Often a Reset button is available on Web pages to clear entered data before submitting and reset the form to the default values.

Now that you understand the basic processes of a Web form, you will learn about the elements that compose a Web form.

<FORM> Tag

The <FORM> tag begins and ends an HTML form. <FORM> is a container tag, which means you must supply both opening and closing tags. In some browsers, if you fail to supply the closing </FORM> tag, the form will not render. Internet Explorer displays form fields even if no <FORM> tag is present. However, you would be unable to submit any form information because without the <FORM> tag, you cannot instruct the browser where to send data. In Navigator, form fields not enclosed in <FORM> tags will not appear at all.

Following is sample syntax for a <FORM> tag:

<FORM METHOD=”post” ACTION=”http://www.anyserver.com/cgi-bin/scriptfile”>

<INPUT… >

<SELECT> … </SELECT>

</FORM>

For now, ignore the INPUT and SELECT elements. The FORM element has two attributes associated with it: METHOD and ACTION.

METHOD attribute

The METHOD attribute specifies which method the browser will use to send form data to a Web server. The METHOD attribute takes two values:

ACTION attribute

The ACTION attribute specifies the name and location of the CGI script used to process the form. The contents of the form will be processed by the script and acted upon according to the instructions in the script.

<INPUT>, <SELECT> and <TEXTAREA>

You can use the <INPUT>, <SELECT> and <TEXTAREA> tags to create form fields by placing them within the FORM element. The <INPUT> tag is empty; you use it to create text boxes, check boxes, radio buttons, and the Submit and Reset buttons. The <SELECT> tag is a container tag used to create select lists and multiple-select lists. The <TEXTAREA> container tag creates text area spaces.

TYPE

The INPUT element uses a TYPE attribute. Add a value to TYPE to designate whether you want a text box, a radio button, a Submit or Reset button, a password field or a check box. For example, to create a radio button with the INPUT element, use the following syntax:

<INPUT TYPE=”radio” NAME=”AddToList”>

You can change the value of TYPE to create other buttons or fields. You can also add additional attributes to customize the element's behavior. You will learn more about the NAME and VALUE attributes shortly.

Web Form Fields

This image describes each type of form field discussed in this lesson.

Forms and the NAME attribute

All form field elements share one attribute: NAME. The NAME attribute identifies information you receive from a user and associates it with a value you specify. The NAME attribute helps you organize user input. For example, you could use a series of check boxes to learn about a user's preferences for gardening, sailing and biking; you could name the-group of boxes "Interests." Thus when you receive information from the forms, you can use the names to determine the user's choices. If the user checks the "sailing" check box, you will receive the following information: Interests=sailing. To understand how the NAME attributes works, you need to learn more about how CGI handles forms.

Form handling, name=value pairs, and CGI

Remember that a CGI script residing on a server receives data from a Web browser, then processes the data into human-readable format (or any other format you require). Figure 7-2 shows a simple form.

In this figure, a form allows the user to supply his name and e-mail address, then indicate whether he wants to be placed on the company's mailing list. When the user clicks the Submit Query button, the browser sends the contents of this form to the Web server as a raw text string.

The basic element of a raw text string is a name=value pair. The NAME attribute of the FORM element organizes information input from the user into name=value pairs. For example, the form in the preceding figure organizes user input according to the following code. Pay special attention to the code shown in bold:

Enter Your Name: <INPUT TYPE="text” NAME="Name” SIZE="40”>

Enter Your E-mail: <INPUT TYPE="text” NAME="Email" SIZE="40">

Would you like to be on our mailing list? <BR>

<INPUT TYPE="radio" NAME="AddToList” VALUE="yes”> Yes

<INPUT TYPE="radio" NAME="AddToList” VALUE="no"> No

When the browser sends this data, it will use the NAME values "Name," "Email" and "AddToList" as the basis for creating the raw text string. You can use any words to spec* NAME values. In this example, the server receives a raw text string that resembles the following:

Name=William+Blake&Email=wblake@albion.com&AddToList=yes

This raw text string consists of name=value pairs, delimited by ampersands (&). Name=value pairs replace spaces with plus signs (+). If a form field is left empty, only the first part of the name=value pair will be returned. For example, if this user left the mailing list option blank, the corresponding name=value pair would return "Email="without any information after the equal symbol.

After the server receives this information, a CGI script can parse and format the raw text string into a human-readable format similar to the following:

Name: William Blake

E-mail: wblake@albion.com

Mailing List: Yes

The form you will create in this lesson will use Name and Email, as well as other form field names that depend upon their function. Now that you understand some of the basic conventions used in forms, you can begin studying and coding individual form fields.

With each lab, you will add an additional field to your form.

Text boxes

A text box is used to collect a single line of data from the user, such as name, e-mail or address information. The text box is the most common form field.

The syntax for creating a text box is as follows:

Additionally, you can use a SIZE attribute to specify the width of the text box in characters. The SIZE attribute has no effect on the amount of text the user can enter; it restricts only the visual appearance of the field. Contrast this with the MAXLENGTH attribute. The value of MAXLENGTH restricts user entries to the specified number of characters; it has no effect on the display width of the field.

Submit and Reset buttons

When you spec* the INPUT TYPE value as "reset" or "submit," you create a button that I performs a specific action. Clicking the Submit button sends the data from the form fields to be processed by the ACTION specified in the <FORM> tag. Clicking the Reset button clears all form fields and resets fields to their default settings. You will use these buttons in the forms you create in this lesson.

Now that you are familiar with the <INPUT> tag, you will use it to create radio buttons and check boxes in the sections that follow.

Radio buttons

Radio buttons are never used as stand-alone items. They are reserved for two or more mutually exclusive options. To ensure exclusivity, a group of radio buttons must share the same NAME, although they will pass individual values. The following example code shows two buttons representing mutually exclusive answers to the same question.

Check boxes

Check boxes are used for non-exclusive choices. You have two options when naming check boxes, and your decision will be based on how you plan to use the data gathered. Consider the following scenario. You want a list of the user's favorite hobbies. You plan to store the user's selections in a database. Are you going to store the user's response (which might include multiple hobbies) in a single field? Or will each hobby separately correspond to a separate database field? Your choice will affect how you name the fields.

In the next lab, you will see the results set from both options.

The syntax for creating a check box is as follows:

<INPUT TYPE="checkbox" NAME="name" VALUE="value">

As with the radio buttons, you can preselect check boxes by adding the attribute CHECKED into the tag.

The following could be a check box section on a form:

With this syntax, each choice is treated as part of a single field named ' Tours ." Either method is acceptable, but one will be more appropriate depending on how you plan to use the data.

Select lists

Select lists are drop-down lists of predetermined options. They are technically not input types because they limit the input a user can send to the Web server. Depending on the settings, these lists can allow single or multiple selections.

Single-option select list

The syntax for creating a drop-down, single-option select list is as follows:

The value that is passed when the form is submitted is the text to the right of the <OPTION> tag. However, if you want to pass a value different from the text that appears in the list, you can add VALUE="value" into any or all of the <OPTION> tags. In the next lab, one option is set to pass a value different from the one the user will see.

Multiple-option select list

Within the <SELECT> tag, you can include the MULTIPLE attribute. The presence of this attribute automatically changes the list to allow users to select multiple options. Because multiple selections are possible, these lists are usually presented with several, if not all, options already exposed.

The SIZE attribute controls how many items will appear in a scrolling list box. If no size is specified, the number of items that will appear by default will vary between browsers.

Scrolling text are a box

To gather more than a line of text from a user, you will use the TEXTAREA form element. TEXTAREA provides a scrolling text box into which a user can enter a few sentences, an address, letters to the editor, or other text.

<TEXTAREA> is a container tag. The only content this tag can contain is text. Text between <TEXTAREA> tags will appear as default text within the box.

The TEXTAREA element has several key attributes, which you will want to understand and use. Table 7-3 outlines these attributes and accepted values.

[More info on forms]