Chapter 10

Getting Feedback with Forms

• How to Create a Simple Form
  • Tip Sheet
• How to Use Input Fields in Forms
  • Tip Sheet
• How CGI Makes Your Forms Work
  • Tip Sheet

Up until now, HTML has been a one-way street. That is, we've only covered the tools to create and publish information for end users to read. But what about feedback and interaction? The World Wide Web isn't just about publishing. It's designed for communication, which is a street that travels in more than one direction.

The biggest tool for allowing your readers to communicate with you via the Web is the HTML form. Forms are special collections of markup tags that work with Web servers to produce a means of obtaining whatever information you need from visitors to your Web site. In this chapter, we'll discover how to create a basic form in HTML, as well as how to use all the available types of input fields at your disposal. Finally, we'll discuss some basic principles behind CGI, the Common Gateway Interface, which is the system behind the scenes that makes forms work.

How to Create a Simple Form

If the whole concept of filling out forms makes you bleary-eyed or fills your head with horrible visions of standing in line at the Department of Motor Vehicles, don't worry. Fill-out forms in HTML are easy, quick, and painless. In fact, you can create a simple fill-out form in just a few simple steps.

Tip Sheet

• Long forms usually work best when placed in their own HTML documents. If your form requires a lot of input, create a new HTML document just for the form and then create a hyperlink to it from your main page. This will eliminate clutter and confusion.
• You're not limited to just input fields in your form. You can use all the normal HTML paragraph and character formatting codes. It's often a good idea to place brief paragraphs in front of groups of input fields to help explain what needs to be entered in the form.

  Figure 10.1 :

1. Type <FORM> in your HTML document.

   Figure 10.2 :

2. Each <FORM> tag has two important attributes that need to be set: Method and Action. The Method attribute indicates how the information inside the form will be transferred to the Web server. There are two choices for Method: GET and POST. The critical difference between the two is that the POST method tells the server to process the form line by line, while the GET method tells the server to process the entire form as one long concatenated string of values. You'll almost always want to use the POST method with your forms.

   Figure 10.3 :

3. The Action attribute tells the server what to do with the data contained in the form. This attribute usually contains the URL of a special program designed to process the data. You'll learn a little more about how this works at the end of the chapter.

   Figure 10.4 :

4. Enter your form labels using normal HTML markup codes. For example, to create a label to prompt the user to enter their last name at the top of the form, type <P>Last Name:.

   Figure 10.5 :

5. To insert a data field to allow the user to enter information into the form, type <INPUT>. This tells the Web browser to place a data field in the document and to accept user input. There are several types of input fields available. One of the simplest types is the single-line text field.

   Figure 10.6 :

6. To specify a single-line text field, enter TYPE=TEXT inside the <INPUT> tag.

   Figure 10.7 :

7. Each input field needs to be assigned a name, so that it can be distinguished from other input fields. You can name the input field anything you like, but the name should be kept short and should not contain any spaces or special characters. For example, to name the above field lastname, type NAME="lastname" inside the <INPUT> tag.

   Figure 10.8 :

8. You can specify the maximum length of a text field with the size attribute by typing SIZE=, followed by the length in quotes. For example, to limit the length of the lastname field to 20 characters, type SIZE="20" inside the <INPUT> tag.

   Figure 10.9 :

9. The last two input items that every form should have are the Submit and Reset buttons. The Submit button is pressed by the user when the form is completed, and sends all of the information to the server. To include a Submit button in your form, type <INPUT TYPE=SUBMIT> near the bottom of the form. The Submit button is a required element-without it, the form cannot be processed.

   Figure 10.10 :

10. The Reset button allows the user to clear all of the fields in the form at once and reset them to their initial values so that new information can be added. Although the Reset button is not required, it is strongly recommended. To include it in your form, type <INPUT TYPE=RESET>.

    Figure 10.11 :

11. Type </FORM> on a new line to close the form.
    

    Figure 10.12 :

How to Use Input Fields in Forms

In many cases, simple text fields aren't enough when it comes to specifying the type of information you want to receive from your forms. Fortunately, HTML forms are very flexible, and include many different types of data fields.

Tip Sheet

• Some of these new input fields, such as the range and file attachment fields, are new to HTML and may not be supported by all browsers. As with all HTML documents, test your forms extensively with all the popular web browsers before publishing them on the Web.
• If you want more precise control over the layout of input fields on your forms, you can use HTML tables. You'll learn all about tables in Chapter 11.

  Figure 10.13 :

1. You can insert a password field into your form. This acts like a single-line text field, but hides the input by displaying asterisks (**) in place of the actual characters entered. To insert a password field into your form, type <INPUT NAME="password" TYPE=PASSWORD>. You can specify the maximum length of the password using the SIZE attribute.

   Figure 10.14 :

2. Checkbox fields allow the user to select or deselect an item. You can also initialize the field to be selected by setting the VALUE attribute to "checked". The label for the checkbox is typed in immediately after the <INPUT> tag. For example, you might include a checkbox field on your form to allow users to specify whether or not they'd like to receive a newsletter. To insert this field into your form, type <INPUT NAME="getnews" TYPE=checkbox VALUE= "checked">Check here to receive our newsletter.

   Figure 10.15 :

3. Radio button fields allow the user to make a selection from a group of choices. Only one item in a radio button group can be selected.

   Figure 10.16 :

4. To insert a radio group into your form, type <INPUT NAME= "groupname" TYPE=radio VALUE="value1">. Each item in the group is entered with separate <INPUT> tags and unique VALUE attributes, but all of the items in the same radio button group should have the same NAME attribute.

   Figure 10.17 :

5. You can add file attachments to the form by using the file type. This allows users to attach a file to the form by either typing the file name or selecting it from a browse dialog. To insert a file attachment field, type <INPUT NAME="attachment" TYPE=file>.

   Figure 10.18 :

6. You can also insert a free-form field for text, which allows the user to enter more than just a single line of text. Instead of using the <INPUT> tag, use the <TEXTAREA> and </TEXTAREA> tag pair.

   Figure 10.19 :

   Figure 10.20 :

7. The <TEXTAREA> tag accepts several rows of input, up to the maximum you specify using the ROWS attribute. You can also specify the number of columns (the line width) in the TEXTAREA field with the COLS attribute. For example, to create a field to allow a user to enter comments, you would type <TEXTAREA NAME= "comments" ROWS=6 COLS=65>. This would leave room for six lines of up to 65 characters each.

   Figure 10.21 :

8. Sometimes you'll want to include a selection menu on your form. This allows you to present the user with a large number of choices without using up too much space on your form. The menu can allow either a single or multiple-choice selection.

   Figure 10.22 :

9. To insert a selection menu, use the <SELECT> and </SELECT> tag pair. As with the <INPUT> tag, you need to assign a NAME attribute for your selection menu. For example, to create a selection menu that allows the user to choose a color, type <SELECT NAME="color">. If you want to allow multiple selections to be made, insert the attribute MULTIPLE inside the <SELECT> tag.

   Figure 10.23 :

10. Each item in a selection menu is typed in using the <OPTION> tag (much like the unordered list from Chapter 7. Enter each menu choice on a separate line.

    Figure 10.24 :

11. When you've finished typing in all of the option items, type </SELECT>.

    Figure 10.25 :

How CGI Makes Your Forms Work

Of course, everything you learned about forms wouldn't amount to much if there weren't a way to process the information they contained. There is a way, and it's called CGI, which is short for common gateway interface.

CGI is a universal way to execute programs on the Web. These programs are known as CGI scripts, and are designed to process data submitted via forms from Web browsers of all types. CGI scripts can be written and compiled using a variety of different programming languages, such as Perl or Visual Basic. The language used depends on the type of server that the CGI script needs to be run on.

In this section, we'll take a brief overview of how CGI works behind the scenes to handle data from your forms.

Tip Sheet

• The methods and rules for creating and preparing CGI scripts go well beyond the scope of this book. Fortunately, there are several resources on learning and implementing CGI available on the Web, including some good beginning tutorials. You can find a list at http://www.yahoo.com/ Computers_and_ Internet/Internet/World_Wide_ Web/CGI_Common_Gateway_Interface/
• If you want to use forms but don't want to deal with CGI, you can instruct your forms to send the response via e-mail. Instead of specifying a CGI script in the ACTION attribute of your <FORM> tag, type mailto:, followed by your e-mail address. This will cause the response to be sent to the e-mail address you specify. This isn't as solid of a solution as using real CGI scripts, and it may not work with all Web browsers, but it can be an acceptable alternative in some cases.

1. The user supplies data by filling out the form, and then presses the Submit button.

   Figure 10.26 :

2. The browser sends the data fields from the form to a CGI script. The appropriate script is specified with the ACTION attribute in the <FORM> tag.

   Figure 10.27 :

3. The CGI script processes the data supplied by the browser.
4. At this point, the CGI script may update a database on the server, instruct the server to perform additional functions, or even execute additional CGI scripts.
5. The CGI script finishes and returns information to the server, usually in the form of a new HTML document that is created by the script.
6. The server sends the new information along to the Web browser, which displays it.

   Figure 10.28 :