Up to this point, everything in this book 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 book 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.
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.
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".
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.)
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:
<INPUT TYPE="checkbox" NAME="baby" VALUE="yes"> Baby Grand Piano <INPUT TYPE="checkbox" NAME="upright"> Upright Piano
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, 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:
<INPUT TYPE="radio" NAME="card" VALUE="v" CHECKED> Visa <INPUT TYPE="radio" NAME="card" VALUE="m"> MasterCard
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.
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:
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.
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:
<INPUT TYPE="reset" VALUE="Clear This Form and Start Over">
You can combine forms with all the HTML bells and whistles you've learned in this book, 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
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.htm"><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.htm">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.
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'
For this attribute to have any effect, someone must create a script or program to read this line and do something about it. My Internet service provider's form script uses this hidden value to determine where to e-mail the form data. (My account name with them is dicko.)
Most scripts require at least one or two hidden input elements. Consult the person who wrote or provided you with the script for details. You can also use hidden items to indicate which of the many similar forms a particular result came from.
Coffee Break: The most common mistake many companies make when putting a first order form on the Internet is the same one all too often made on paper order forms: leaving out a key piece of information. To save yourself the embarrassment of an incomplete order form, you might want to start with the sample form at
http://www.mcp.com/sams/books/235-8/ch18/order.htmThis is just your basic, run-of-the-mill product order form with credit card information, name, address, and so forth. Use it as a starting template and then add your own products, graphics, and unique information. Don't forget to change the <FORM ACTION> to the address of your own server script! You can also use form selection lists as menus to navigate around your site. For an example, go to the 24-Hour HTML Café at
http://www.mcp.com/sams/books/235-8/cafe18.htm
This chapter demonstrated how to create HTML forms, which allow readers of your Web pages to enter specific information and send it back to you.
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.
| Tag | Attribute | Function |
| <FORM>...</FORM> |
|
Indicates an input form. |
|
|
ACTION="..." | The address of the script to process this form input. |
|
|
METHOD="..." | How the form input will be sent to the server. Normally set to POST, rather than GET. |
| <INPUT> |
|
An input element for a form. |
|
|
TYPE="..." | The type for this input widget. Possible values are CHECKBOX, HIDDEN, RADIO, RESET, SUBMIT, TEXT, or IMAGE. |
|
|
NAME="..." | The name of this item, as passed to the script. |
|
|
VALUE="..." | For a text or hidden item, the default value; for a check box or radio button, the value to be submitted with the form; for reset or submit buttons, the label for the button itself. |
|
|
SRC="..." | The source file for an image. |
|
|
CHECKED | For check boxes and radio buttons, indicates that this item is checked. |
|
|
SIZE="..." | The width, in characters, of a text input region. |
|
|
MAXLENGTH="..." | The maximum number of characters that can be entered into a text region. |
|
|
ALIGN="..." | For images in forms, determines how the text and image will align (same as with the <IMG> tag). |
|
|
|
|
| <TEXTAREA>...</TEXTAREA> |
|
Indicates a multiline text entry form element. Default text can be included. |
|
|
NAME="..." | The name to be passed to the script. |
|
|
ROWS="..." | The number of rows this text area displays. |
|
|
COLS="..." | The number of columns (characters) this text area displays. |
| <SELECT>...</SELECT> |
|
Creates a menu or scrolling list of possible items. |
|
|
NAME="..." | The name that is passed to the script. |
|
|
SIZE="..." | The number of elements to display. If SIZE is indicated, the selection becomes a scrolling list. If no SIZE is given, the selection is a pop-up menu. |
|
|
MULTIPLE | Allows multiple selections from the list. |
| <OPTION> |
|
Indicates a possible item within a <SELECT> element. |
|
|
SELECTED | With this attribute included, the <OPTION> will be selected by default in the list. |
|
|
VALUE="..." | The value to submit if this <OPTION> is selected when the form is submitted. |
