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.
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:
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.
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.
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.
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.
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:
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.)
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:
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.
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:
If the user didn't change the default CHECKED selection, card='v' would be sent instead.
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'
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.
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:
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.
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>
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.
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:
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.