Go Back to Folder >> HTML

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.

Type <FORM> in your HTML document.

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.

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.

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:.

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.

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

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.

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.

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.

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>.

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

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.

• 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.

• 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.

• 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.

• 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.

• 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>.

• 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.

• 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.

• 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.

• 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.

• 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.

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

Enter your search terms Web www.brainbeez.com Submit search form

• 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.

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

• 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.

• The CGI script processes the data supplied by the browser.
• 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.
• 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.

The server sends the new information along to the Web browser, which displays it.

Enter your search terms Web www.brainbeez.com Submit search form