Chapter 18

• How HTML Forms Work
• Creating a Form
  • Figure 18.1.
  • Figure 18.2.
  • Figure 18.3.
• Text Input
• Identifying Each Piece of Form Data
  • Figure 18.4.
• Check Boxes
• Radio Buttons
• Selection Lists
• Text Areas
• Submit!
• Creating a Custom Submit Button
  • Figure 18.5.
  • Figure 18.6.
• Including Hidden Data
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 18

Creating HTML Forms

Up to this point, everything in this guide has focused on getting information out to others. (E-mail links, introduced in Chapter 8, "Intra-Page and E-mail Links," are the one exception.) But HTML is a two-way street; you can use your Web pages to gather information from the people who read them as well.

Web forms allow you to receive feedback, orders, or other information from the readers of your Web pages. If you've ever used a Web search engine such as Lycos or Excite, you're familiar with HTML forms. Product order forms are also an extremely popular use of forms.

This chapter shows you how to create your own forms and the basics of how to handle form submissions.

---

New Term: An HTML form is part of a Web page that includes areas where readers can enter information to be sent back to you, the publisher of the Web page.

---

How HTML Forms Work

Before you learn the HTML tags to make your own forms, you should understand how the information that someone fills out on a form makes its way back to you. You also need to have the person who runs your Web server computer set it up to process your forms.

Every form must include a button for the user to submit the form. When someone clicks on this button, all the information they have filled in is sent (in a standard format) to an Internet address that you will specify in the form itself. For that information to get to you, you have to put a special forms-processing program at that address.

Almost all Internet service provider companies that offer Web page hosting also provide pre-programmed scripts to their customers for processing forms. The most common thing that such a script would do is forward the information from the form to your e-mail address, though it might also save the information to a file on the Web server or format the form data to make it easier for you to read.

It's also possible to set things up so that much of the form information can be interpreted and processed automatically. For example, server software exists to authorize a credit card transaction automatically over the Internet, confirm an order to the customer's e-mail address, and enter the order directly into your company's in-house database for shipment. Obviously, setting up that sort of thing can get quite complex, and it's beyond the scope of this guide to explain all the things you could do with form data once it has been submitted. To Do: Before you start building your first form, you should do the following:

• Ask your Internet service provider what they offer for form processing scripts and what exact address your forms should send their information to. In the next chapter, you'll see where and how to put that address into your forms.
• If you run your own Web server computer, the server software probably came with some basic form processing scripts. Consult your documentation to set them up properly and find out the address on your server where each is located.
• If you have a choice of several forms-processing scripts, I recommend starting with the script to simply send the "raw" form data to your e-mail address. The example in this chapter uses such a script. You can experiment with fancier scripts later.

Once you have the address of your forms-processing script, you're ready for the rest of this chapter. As usual, I recommend that you create a form of your own as you read through my examples.

Creating a Form

Every form must begin with a <FORM> tag, which can be located anywhere in the body of the HTML document. The <FORM> tag normally has two attributes, METHOD and ACTION:

<FORM METHOD="post" ACTION="/cgi/generic">

Nowdays, the METHOD is almost always "post", which means to send the form entry results as a document. (In some special situations, you may need to use METHOD="get", which submits the results as part of the URL header instead. For example, "get" is sometimes used when submitting queries to search engines from a Web form. If you're not yet an expert on forms, just use "post", unless someone tells you to do otherwise.)

The ACTION attribute specifies the address of the program or script on the server computer that will process the information a user enters on a form. This is the address that your service provider or Web server manager should be able to give you, as mentioned in the previous "To Do" section. If you are a programmer, you can also write your own scripts in any language supported on the server.

The form in Figures 18.1 and 18.2 includes every type of input that you can currently use on HTML forms. Figure 18.3 is the same form, as it might look after someone fills it out. As you read through the rest of this chapter, refer to these figures for an example of each type of input element.

Figure 18.1. All parts of a form must fall between the <FORM> and </FORM> tags.

Figure 18.2. The form listed in Figure 18.1 uses every type of HTML form input element.

---

Time Saver: Notice that most of the text in Figure 18.2 is monospaced. Monospaced text makes it easy to line up a form input box with the box above or below it and makes your forms look neater. To use monospaced text throughout a form, enclose the entire form between <PRE> and </PRE> tags. Using these tags also relieves you from having to put <BR> at the end of every line because the <PRE> tag puts a line break on the page at every line break in the HTML document.

---

Figure 18.3. Visitors to your Web site fill out the form with their mouse and/or keyboard, and then click on the I Submit! button.

Text Input

To ask the user for a specific piece of information within a form, use the <INPUT> tag. This tag must fall between the <FORM> and </FORM> tags, but it can be anywhere on the page in relation to text, images, and other HTML tags. For example, to ask for someone's name you could type the following:

What's your first name? <INPUT TYPE="text" SIZE=20 

MAXLENGTH=30 NAME="firstname">

What's your last name? <INPUT TYPE="text" SIZE=20 

MAXLENGTH=30 NAME="lastname">

The TYPE attribute indicates what type of form element to display, a simple one-line text entry box in this case. (Each element type is discussed individually in the following sections.)

The SIZE attribute indicates approximately how many characters wide the text input box should be. If you are using a proportionally spaced font, the width of the input will vary depending on what the user enters. If the input is too long to fit in the box, most Web browsers will automatically scroll the text to the left.

MAXLENGTH determines the number of characters the user is allowed to type into the text box. If someone tries to type beyond the specified length, the extra characters won't appear. You may specify a length that is longer, shorter, or the same as the physical size of the text box. SIZE and MAXLENGTH are only used for TYPE="text" because other input types (check boxes, radio buttons, and so on) have a fixed size.

---

Time Saver: If you want the user to enter text without it being displayed on the screen, you can use <INPUT TYPE="password"> instead of <INPUT TYPE="text">. Asterisks (***) are then displayed in place of the text the user types. The SIZE, MAXLENGTH, and NAME attributes work exactly the same way for TYPE="password" as for TYPE="text".

---

Identifying Each Piece of Form Data

No matter what type an input element is, you must give a name to the data it gathers. You can use any name you like for each input item, as long as each one on the form is different. When the form is sent to the server script, each data item is identified by name.

For example, if the user entered Jane and Doe in the text box previously defined under the "Text Input" section, the server script would receive a document including the following:

firstname='Jane'

lastname='Doe'

If the script mails the raw data from the form submission to you directly, you would see these two lines in an e-mail message from the server. The script might also be set up to format the input into a more readable format before reporting it to you.

Figure 18.4 is a sample e-mail message from the form in Figure 18.3. Notice that each data element is identified by the name given to it in Figure 18.1. Your server script might present the data in a different format than that shown in Figure 18.4, but it should include all the same information.

Figure 18.4. Clicking on the I Submit! button in Figure 18.3 causes this information to be sent to a server script. (The script may then be e-mailed to you.)

Check Boxes

The simplest input type is a check box, which appears as a small square the user can select or deselect by clicking. A check box doesn't take any attributes other than NAME:

Selected check boxes appear in the form result sent to the server script as follows:

baby='yes'

Blank (deselected) check boxes do not appear in the form output result at all. If you don't specify a VALUE attribute, the default VALUE of "on" is used.

---

Time Saver: You can use more than one check box with the same name, but different values, as in the following code:

<INPUT TYPE="checkbox" NAME="pet" VALUE="dog"> Dog
<INPUT TYPE="checkbox" NAME="pet" VALUE="cat"> Cat
<INPUT TYPE="checkbox" NAME="pet" VALUE="iguana"> Iguana

If the user checked both cat and iguana, the submission result would include the following:

pet='cat'
pet='iguana'

---

Radio Buttons

Radio buttons, where only one choice can be selected at a time, are almost as simple to implement as check boxes. Just use TYPE="radio" and give each of the options its own INPUT tag, as in the following code:

The VALUE can be any name or code you choose. If you include the CHECKED attribute, that button will be selected by default. (No more than one button with the same name can be checked.)

If the user selected MasterCard from the preceding radio button set, the following would be included in the form submission to the server script:

card='m'

If the user didn't change the default CHECKED selection, card='v' would be sent instead.

Selection Lists

Both scrolling lists and pull-down pick lists are created with the <SELECT> tag. This tag is used together with the <OPTION> tag:

<SELECT NAME="extras" SIZE=3 MULTIPLE>

<OPTION SELECTED> Electric windows

<OPTION> AM/FM Radio

<OPTION> Turbocharger

</SELECT>

No HTML tags other than <OPTION> should appear between the <SELECT> and </SELECT> tags.

Unlike the text input type, the SIZE attribute here determines how many items show at once on the selection list. If SIZE=2 had been used in the preceding code, only the first two options would be visible, and a scrollbar would appear next to the list so the user could scroll down to see the third option.

Including the MULTIPLE attribute allows users to select more than one option at a time, and the SELECTED attribute makes an option selected by default. The actual text accompanying selected options is returned when the form is submitted. If the user selected Electric windows and Turbocharger, for instance, the form results would include the following lines:

extras='Electric windows'

extras='Turbocharger'

---

Time Saver: If you leave out the SIZE attribute or specify SIZE=1, the list will create a pull-down pick list. Pick lists cannot allow multiple choices; they are logically equivalent to a group of radio buttons. For example, another way to choose between credit card types would be:

<SELECT NAME="card">
<OPTION> Visa
<OPTION> MasterCard
</SELECT>

---

Text Areas

The <INPUT TYPE="text"> attribute mentioned earlier only allows the user to enter a single line of text. When you want to allow multiple lines of text in a single input item, use the <TEXTAREA> and </TEXTAREA> tags instead. Any text you include between these two tags will be displayed as the default entry. Here's an example:

<TEXTAREA NAME="comments" ROWS=4 COLS=20>

Please send more information.

</TEXTAREA>

As you probably guessed, the ROWS and COLS attributes control the number of rows and columns of text that fit in the input box. Text area boxes do have a scrollbar, however, so the user can enter more text than fits in the display area.

---

Just A Minute: Some older browsers do not support the placement of default text within the text area. In these browsers, the text may appear outside the text input box.

---

Submit!

Every form must include a button that submits the form data to the server. You can put any label you like on this button with the VALUE attribute:

<INPUT TYPE="submit" VALUE="Place My Order Now!">

A gray button will be sized to fit the label you put in the VALUE attribute. When the user clicks the button, all data items on the form are sent to the program or script specified in the FORM ACTION attribute.

Normally, this program or script generates some sort of reply page and sends it back to be displayed for the user. If no such page is generated, the form remains visible, however.

You may also optionally include a button that clears all entries on the form so users can start over again if they change their minds or make mistakes. Use this line:

Creating a Custom Submit Button

You can combine forms with all the HTML bells and whistles you've learned in this guide, including backgrounds, graphics, text colors, tables, and frames. When you do so, however, the standard submit and reset buttons may start looking a little bland.

Fortunately, there is an easy way to substitute your own graphics for those buttons. To use an image of your choice for a submit button, type:

<INPUT TYPE="image" SRC="button.gif" NAME="buttonxy">

The image named button.gif will appear on the page, and the form will be submitted whenever someone clicks on that image. You can also include any attributes normally used with the <IMG> tag, such as BORDER or ALIGN.

---

Just A Minute: When the form data is sent to the server, the exact pixel coordinates of the click will be included as a data item with the name you specify in <INPUT NAME>. For example, the line in the previous paragraph might send

buttonxy="12,40"

Normally, you should ignore this information, but some server scripts use it to make the button into an image map.

---

There is no specific form type for a graphical reset button, but you can achieve the same effect by putting an image link to the current page, like this:

<A HREF="thispage.asp"><IMG SRC="cancel.gif"></A>

---

Time Saver: You can make a button that cancels the form and proceeds to another page (ignoring all information the user has entered so far) simply by linking to that other page. For example:

<A HREF="nodice.asp">Click here to cancel.</A>

---

Figures 18.5 and 18.6 show a jazzed-up version of the "Get Me Rich Quick" form which uses customized submit and reset buttons.

Figure 18.5. The last <INPUT> tag on this page creates a custom graphical submit button. The <IMG> tag after it resets the form.

Figure 18.6. The HTML in Figure 18.5 combines graphics, tables, and form input elements on this Web page.

Including Hidden Data

If you want to send certain data items to the server script that processes a form, but you don't want the user to see them, you can use the INPUT TYPE="hidden" attribute. This attribute has no effect on the display at all; it just adds any name and value you specify to the form results when they are submitted.

You might use this attribute to tell a script where to e-mail the form results. For example, Figure 18.5 includes the following input element:

<INPUT TYPE="hidden" NAME="mail_to" VALUE="dicko">

which adds the following line to the form output:

mail_to='dicko'

You also found that you need to set up a script or program to process form data before you actually create a form. Your Internet service provider or server software vendor can help you do this.

Table 18.1 summarizes the HTML tags and attributes covered in this chapter.

Table 18.1. HTML tags and attributes covered in Chapter 18.

Q&A

Q I've heard that it's dangerous to send credit card numbers over the Internet. Can't thieves intercept form data on its way to me?

A It is possible to intercept form data (and any Web pages or e-mail) as it travels through the Internet. If you ask for credit card numbers or other sensitive information on your forms, you should ask the company who runs your Web server about "secure" forms processing. There are several reliable technologies for eliminating the risk of high-tech eavesdroppers, but it may cost you quite a bit to implement the security measures.

To put the amount of risk in perspective, remember that it is much more difficult to intercept information traveling through the Internet than it is to look over someone's shoulder in a restaurant or retail store. Unless you service hundreds of credit card transactions per day, it will probably never be worth it to a would-be thief to bother tapping in to your forms data. Of the billions of dollars lost to credit card fraud each year, so far exactly zero has been from "unsecure" Internet transactions.

Q Can I put forms on a CD-ROM, or do they have to be on the Internet?

A You can put a form anywhere you can put a Web page. If it's on a disk or CD-ROM instead of a Web server, it can be filled out by people whether or not they are connected to the Internet. Of course, they must be connected to the Internet (or your local intranet) when they click on the submit button, or the information won't get to you.

Quiz Questions

1. What do you need to get from the people who administer your Web server computer before you can put a form on the Internet?

2. Write the HTML to create a "guestguide" form that asks someone for his name, sex, age, and e-mail address.

3. If you had created an image named sign-in.gif, how would you use it as the submit button for the guestguide in Question 2?

Answers

Activities

• You should make a form using all of the different types of input elements and selection lists to make sure you understand how each of them works.