HTML Forms

If you have spent any time visiting Web sites on the Internet, chances are good that you have filled out many Web-based forms. In fact, you probably work with forms (such as search engines or login screens) every time you surf the Web. Although the majority of Web pages consist of text, images, and hyperlinks, which let you retrieve information, almost all Web sites have at least one form that lets you send information back to the Web site’s operator. A form might be as simple as a login screen where you provide your username and password for access to the site, or as complex as the user interfaces on Hotmail, eBay, Yahoo, and such.

From a designer’s viewpoint, forms let you establish a dialog with your site’s visitors. Instead of using text and pictures to send information, forms let you use text boxes, check boxes, radio buttons, and selection menus to retrieve information.

To process the responses (that is, the form results) you receive from the site visitor, you will normally use some type of script running on the Web server and possibly a script the browser runs before submitting the information the visitor entered into the form. You will learn how to implement such scripts later in this chapter. For now, understand that the scripts that process the form results normally serve two purposes. First, either the Web server or (preferably) the Web browser might run a script that validates the form’s data, that is, a script that makes sure the visitor filled out all “required” fields and that the data provided in the form is valid. Second, either the Web server will run a script that processes the form results itself, or the script may place the form results into a file and forward them to another program for further processing. (Some programmers refer to the form results that the browser submits to the Web server as the form data set.)

Although they vary greatly in appearance, all forms have several elements in common. Forms consist of one or more labeled input fields, check boxes, radio buttons, or drop-down menus Web site visitors use to enter information. All forms also have a Submit button on which a visitor clicks to send the form results to the Web server. Most forms (especially those with many input fields) also have a Reset button on which a visitor can click to clear all previously entered responses and start over. Beyond these basic items (labeled input fields and two special-purpose pushbuttons), you can include anything on a form that you can directly on the Web page (with the exception that one form cannot contain a second form). As you will learn, an HTML form—like an HTML table—is a “container” that holds Web page objects. However, unlike an HTML table (which is designed to send information to the site visitor), a form’s purpose is to retrieve responses from the visitor.