EarthWeb sites:

Chapter 13

HTML Forms

CONTENTS

• Using Forms and Form-Capable Browsers
• Creating the Form
  • Example: Someone Else's Form
• Text Fields and Attributes
  • Example: Web-based Feedback Form
• The <INPUT> Tag
  • TEXT
  • PASSWORD
  • CHECKBOX
  • RADIO
  • HIDDEN
  • RESET
  • SUBMIT
  • Example: A More Complete Form
• Creating Pop-Up and Scrolling Menus
  • Using <SELECT>
  • Allowing More than One Selection
  • Example: Order Form
• Summary
• Review Questions
• Review Exercises

The next set of HTML tags are designed to allow you to enhance the interactivity of your Web pages by increasing your ability to request information from users. Using the forms tags, you can ask users to enter text information, choose from menus, mark checkboxes, make choices from radio buttons, and then send that information to the Web server for processing.

Using Forms and Form-Capable Browsers

Although the forms tags are a part of the HTML 2.0 standard, it's important to recognize that not all browsers are capable of viewing them-especially older browsers and text-based browsers. Users need to have forms-aware browsers, like the current versions of NCSA Mosaic, Netscape Navigator, and Microsoft Internet Explorer, among others. Generally, other browsers will simply ignore the forms commands if they can't deal with them.

The idea behind a Web form is simple-it allows you to accept information or answers from your users with varying levels of guidance. Users can be asked to type answers, choose their answers from a list of possibilities you create, or even be limited to choosing one answer from a number of options that you specify.

That data is then passed on to the Web server, which hands it to a script, or small program, designed to act on the data and (in most cases) create an HTML page in response. In order to deal with forms data then, you need to understand a little something about scripting, or programming, for a Web server-or know someone who does. While learning to program is beyond the scope of this book, we'll look at how these scripts work in Chapter 14, "Form Design and Data Gathering with CGI Scripts."

Creating the Form

In an HTML document, forms are set between the <FORM> container tags. The form container works as follows:

<FORM METHOD="how_to_send" ACTION="URL of script">
...form data...
</FORM>

Notice that the <FORM> tag takes two attributes: METHOD and ACTION. The METHOD attribute accepts either POST or GET as its value. POST is by far the more popular, as it allows for a greater amount of data to be sent. GET is a little easier for Web programmers to deal with, and is best used with single responses, like a single textbox.

The second attribute is ACTION, which simply accepts the URL for the script that will process the data from your form. Most often the script is stored in a directory called bin/ or cgi-bin/ located on your Web server.

An example of the <FORM> tag then, would be the following:

<FORM METHOD="SEND" ACTION="http://www.fakecorp.com/cgi-bin/register_script">
</FORM>

As with any HTML container tag, this implementation of the <FORM> tag has actually created a complete form (just like <P> and </P> is a complete paragraph). Unfortunately, our complete form doesn't do anything yet, so that's somewhat academic.

Example: Someone Else's Form

Let's take a quick look at a form that's been created by someone else-one that most seasoned Web browsers have encountered at one time or another. Load up your Web browser and point it to http://webcrawler.com/.

This is the WebCrawler page, a Web search engine offered by America Online. Your next step is to view the source of this document. Select the View Document Source command in your Web browser's Edit menu. What you see will look something like figure 13.1.

Figure 13.1 : Example of an HTML form available on theWeb.

Notice a couple of things here. The <FORM> tag at WebCrawler is using the ACTION and METHOD attributes that were discussed. ACTION is accessing a script called WebQuery found in the cgi-bin/ directory of the Web server. The METHOD used is SEND.

Text Fields and Attributes

One of the more common uses for forms is to accept multiple lines of text from a user, perhaps for feedback, bug reports, or other uses. To do this, use the <TEXTAREA> tag within your form. You can set this tag to control the number of rows and columns it displays, although it will generally accept as many characters as the user desires to enter. It takes the following form:

<TEXTAREA NAME="variable_name" ROWS="number" COLS="number">
default text
</TEXTAREA>

It may surprise you to find that <TEXTAREA> is a container tag, since it just puts a box for typing on the page. What's contained in the tag is the default text-so you can guide your users by letting them know what you'd like entered there. For instance:

<FORM>
<TEXTAREA NAME="comments" ROWS="4" COLS="40">
Enter comments about this Web site.
Good or Bad.
</TEXTAREA>
</FORM>

The default text appears in the textbox just as typed. Notice in figure 13.2 that text inside the <TEXTAREA> tag works like <PRE> formatted text. Any returns or spaces you add to the text are displayed in the browser window. In fact, notice that by hitting Return after the opening <TEXTAREA> tag, I'm inserting a blank line at the top of the textarea (in many browsers).

Figure 13.2 : The <TEXTAREA> tag in action.

The NAME attribute is a variable name for this string of text. It gets passed on to your processing script on the Web server. ROWS and COLS can accept different numbers to change the size of the textarea box, but you should take care that the majority of browsers can see the entire box on-screen. It's best to limit COLS to 80, and ROWS to something like 24 (the typical size for a text-based computer screen). But it's up to you.

<TEXTAREA> will also accept one other attribute: WRAP. WRAP can be set to OFF (which is the default if WRAP is not included), VIRTUAL, or PHYSICAL. Setting wrap to PHYSICAL forces the browser to include actual line breaks in the text when sending it to the Web server. VIRTUAL makes the textbox seem to offer line wrap, but sends a continuous stream of words to the Web server (unless the user has entered returns on his or her own).

Example: Web-based Feedback Form

I mentioned before that <TEXTAREA> is commonly used to gather feedback from your Web users. To create a small form to do just that, save your default template as a new HTML document and enter the following:

<BODY>
<H3>Feedback Form</H3>
<P>Please take a moment to tell us what you thought of the Web site.<BR>
Your Feedback is appreciated!</P>
<FORM METHOD="POST" ACTION="cgi-bin/feedback">
Enter your comments below:<BR>
<TEXTAREA NAME="comments" ROWS="10" COLS="70" WRAP="VIRTUAL">
Dear BigCorp:
</TEXTAREA>
</FORM>
</BODY>

You can see how this looks in figure 13.3. Notice in the example that some descriptive text is enclosed inside the <FORM> tag, but outside of the <TEXTAREA> tag. This is completely legal-it just lets you explain what the purpose of the textarea is.

Figure 13.3 : Sample textarea HTML form.

You may have realized that there's something lacking in this sample form. There's no way to submit the user's entry! You'll get to that in the next section, when I discuss this next tag for form entry.

The <INPUT> Tag

Our next tag for HTML forms give you the opportunity to be a bit more picky about the type of input you're going to accept from the user. The <INPUT> tag follows the following format:

<INPUT TYPE="type_of_box" NAME="variable" SIZE="number" MAXLENGTH="number">

Now, technically, the only required attributes are TYPE and NAME. Some other "types" of the input tag will also accept the attribute VALUE. But first, let's look at the different types of <INPUT>.

TEXT

The first possible value for the TYPE attribute is TEXT, which creates a single-line textbox of a length you choose. Notice that the length of the box and the maximum length entered by the user can be set separately. It's possible to have a box longer (or, more often, shorter) than the maximum number of characters you allow to be entered. Here's an example of a textbox:

Last name: <INPUT TYPE="TEXT" NAME="last_name" SIZE="40" MAXLENGTH="40">

When appropriately entered between <FORM> tags, this <INPUT> yields a box similar to figure 13.4. If desired, the attribute VALUE can be used to give the textbox a default entry, as in the following example:

Figure 13.4 : Using the TEXT option with the TYPE attribute.

Type of Computer: <INPUT TYPE="TEXT" NAME="computer" SIZE="50" MAXLENGTH="50" VALUE="Pentium">

PASSWORD

The PASSWORD option is nearly identical to the TEXT option except that it responds to typed letters with bullet points or a similar scheme (chosen by the browser) to keep the words from being read. A sample password box could be the following:

Enter Password: <INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25">

When characters are typed into this textbox, they are shown on the screen as in figure 13.5.

Figure 13.5 : PASSWORD hides text from people looking over your user's shoulder.

Recognize that the text is still stored as the text typed by the user-not as bullet points or similar characters.

CHECKBOX

This value for TYPE allows you to create a checkbox-style interface for your form. This is best used when there are two possible values for a given choice-and no others. You can also determine whether or not a checkbox will already be checked (so that it must be unchecked by the user, if desired), by using the attribute CHECKED. Here's an example of adding checkboxes to a form:

Type of computer(s) you own:<BR>
<INPUT TYPE="CHECKBOX" NAME="Pentium" CHECKED> Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-Series PC
<INPUT TYPE="CHECKBOX" NAME="Macintosh"> Macintosh

In this example, it's possible to check as many of the options as are presented. CHECKBOX evaluates each item separately from any others. Figure 13.6 illustrates how CHECKBOX is displayed in a browser.

Figure 13.6 : Notice that Pentium is prechecked.

RADIO

Like CHECKBOX, RADIO is designed to offer your user a choice from pre-determined options. Unlike CHECKBOX, however, RADIO is also designed to accept only one response from among its options. RADIO uses the same attributes and basic format as CHECKBOX.

RADIO requires that you use the VALUE attribute, and that the NAME attribute be the same for all of <INPUT> tags that are intended for the same group. VALUE, on the other hand, should be different for each choice. For instance, look at the following example:

Choose the computer type you use most often:<BR>
<INPUT TYPE="RADIO" NAME="Computer" VALUE="P" CHECKED> Pentium
<INPUT TYPE="RADIO" NAME="Computer" VALUE="4"> 486-Series PC
<INPUT TYPE="RADIO" NAME="Computer" VALUE="M"> Macintosh
<INPUT TYPE="RADIO" NAME="Computer" VALUE="O"> Other

With RADIO, it's important to assign a default value, since it's possible that the user will simply skip the entry altogether. While the user can't check more than one, he or she can check none. So choose the most common value and set it as CHECKED, just so that the form-processing script doesn't have trouble.

HIDDEN

This <INPUT> type technically isn't "input" at all. Rather, it's designed to pass some sort of value along to the Web server and script. It's generally used to send a keyword, validation number, or some other kind of string to the script so that the script knows it's being accessed by a valid (or just a particular) Web page. The <INPUT TYPE="Hidden"> tag takes the attributes NAME and VALUE.

RESET

The <INPUT> tag has built into it the ability to clear an HTML form. RESET simply creates a push button (named with the VALUE string) that resets all of the elements in that particular FORM to their default values (erasing anything that the user has entered). An example would be the following:

<INPUT TYPE="RESET">

With a VALUE statement, you could enter the following:

<INPUT TYPE="RESET" VALUE="Reset the Form">

The results are shown in figure 13.7.

Figure 13.7 : Default and VALUE-attributed Reset buttons.

SUBMIT

The <INPUT> tag also has a type that automatically submits the data that's been entered into the HTML form. The SUBMIT type accepts only the attribute VALUE, which can be used to rename the button. Otherwise, the only purpose of the Submit button is to send off all the other form information that's been entered by your user. See the following two examples (see fig. 13.8):

Figure 13.8 : Creating a Submit button.

<INPUT TYPE="SUBMIT">
<INPUT TYPE="SUBMIT" VALUE="SEND IT IN!">

You can use just about anything you want for the VALUE, although it's best to remember that really small words, like OK, don't look great as buttons. To make a button larger, enter the VALUE with spaces on either end, like in the following:

<INPUT TYPE="SUBMIT" VALUE="       GO      ">

Example: A More Complete Form

Along with all the other <INPUT> types, now you've finally got a way to submit data. So, let's create a more involved form that includes some of these examples-a subscription form.

Save your HTML template to create a new document. Then, enter something similar to Listing 13.1.

Listing 13.1  scrp_frm.html  Creating a Complete Form

<BODY>
<H2>Subscribe to CorpWorld</H2>
<P>Interested in receiving daily email updates of all the latest exploits of BigCorp? Well, now you can. And, best of all, it's free! Just fill out this form and submit it by clicking the "Send it In" button. We'll put you on our mailing list, and you'll receive your first email in 3-5 days.</P>
<FORM METHOD="Send" ACTION="http://www.fakecorp.com/cgi-bin/subscribe">
Please complete all of the following:<BR>
First Name: <INPUT TYPE="Text" Name="first" SIZE="25" MAXLENGTH="24"><BR>
Last Name:  <INPUT TYPE="Text" Name="last" SIZE="35" MAXLENGTH="34"><BR>
Business:   <INPUT TYPE="Text" Name="business" SIZE="50" MAXLENGTH="49"><BR>
We must have a correct email address to send you the newsletter:<BR>
Email:      <INPUT TYPE="Text" Name="email" SIZE="50" MAXLENGTH="49"><BR>
How did you hear about BigCorp's email letter?<BR>
<INPUT TYPE="RADIO" NAME="hear" VALUE="web" CHECKED>Here on the Web
<INPUT TYPE="RADIO" NAME="hear" VALUE="mag">In a magazine
<INPUT TYPE="RADIO" NAME="hear" VALUE="paper">Newspaper story
<INPUT TYPE="RADIO" NAME="hear" VALUE="other">Other
<BR> Would you care to be on our regular mailing list?<BR>
<INPUT TYPE="CHECKBOX" NAME="snailmail" CHECKED> Yes, I love junk mail<BR>
<INPUT TYPE="RESET">
<INPUT TYPE="SUBMIT" VALUE="Send it in!">
</FORM>
</BODY>

Notice that, for text type <INPUT> boxes, the MAXLENGTH is one less than the size of the box. This tends to look a little better, but choosing the size is up to you. Figure 13.9 shows how it looks on a Web page. (You'll get to straightening everything out and making it look great in Chapter 14.)

Figure 13.9 : The complete form in MS Internet Explorer.

Creating Pop-Up and Scrolling Menus

The last types of input that you can offer to users of your Web page revolve around the <SELECT> tag, which can be used to create different types of pop-up and scrolling menus. This is another element designed specifically for allowing users to make a choice-they can't enter their own text. The <SELECT> tag requires a NAME attribute and allows you to decide how many options to display at once with the SIZE attribute.

Using <SELECT>

Also notice that, like <TEXTAREA>, <SELECT> is a container tag. Options are placeed between the two <SELECT> tags, each with a particular VALUE that gets associated with <SELECT>'s NAME attribute when chosen. The following is the basic format:

<SELECT NAME="variable">
<OPTION SELECTED VALUE="value"> Menu text
<OPTION VALUE="value"> Menu text
...
</SELECT>

The attribute SELECTED is simply designed to show which value will be the default in the menu listing. value can be anything you want to pass on to the Web server and associated script for processing. An example might be:

Choose your favorite food:
<SELECT NAME="food">
<OPTION SELECTED VALUE="ital"> Italian
<OPTION VALUE="texm"> TexMex
<OPTION VALUE="stek"> SteakHouse
<OPTION VALUE="chin"> Chinese
</SELECT>