An Introduction to HTML Forms

As I've just mentioned, forms are everywhere on the web. They allow us as developers to collect and ultimately process data from our end users. Let's take eBay as an example. As a buyer, you visit eBay in an attempt to find a sweet deal on something you probably don't need. When you visit eBay, you don't verbally tell eBay to find an item; instead, you interact with a form containing form objects in the shape of a search text box and a search button (see Figure 9.1).

Figure 9.1. eBay uses forms and form objects to collect a user's search criteria.

You enter your search criteria into the text box, click the search button, and magically the results are returned in a clean list format through which you can quickly browse. From a development standpoint, eBay uses forms and form objects to facilitate the interaction between the end user and eBay. From a design standpoint, forms and form objects make it easy for the user to enter the criteria about which he wants more information. As a buyer, you might be familiar with this process. It's straightforward, easy to use, and more importantly, intuitive.

From a seller's perspective, the process is slightly more complex, but again, involves forms and form objects. When you want to sell an item on eBay's website, the first step is to register as a seller (see Figure 9.2).

Figure 9.2. Potential eBay sellers use forms and form objects to register with eBay.

As you can see from Figure 9.2, numerous form objects exist to collect different types of information from the seller. Text boxes (like the one used in the search form) are used to collect general information such as first name, last name, address, city, email, and so on. Drop-down menus are used to allow the user to choose from predefined sets of states and countries, and from lists of months, days, and years for birthdays. In addition, if you scroll further down the page, a check box is used to collect a value indicating that yes, the user accepts the user agreement when checked; if left unchecked, no, the user does not agree with the user agreement. Finally, a button object is used to submit the information to eBay for processing. (We'll get to processing the content of forms and form objects in Part V, "Dynamic Web Page Development"). Both models (buyer and seller) demonstrate forms and form objects used in real-world websites that millions of people use on a daily basis. Of course, forms and form objects aren't exclusive to eBay. Companies all over the web use forms and form objects so that users can interact with the services they offer on their websites.

Even with this explanation, you still might be unclear about the differences between forms and form objects. To clear up any misconceptions between the two, think of the process of registering for a driver's license at your local Department of Motor Vehicles (DMV). You wait in line until your turn comes up, you tell the usually expressionless attendant that you'd like to register to receive a new driver's license, in which case, she hands you a form. Think about what that form contains. Paper-based forms, like the one from the DMV, contain places for you to enter your name, address, city, zip, phone number, car model, car type, and so on. The places on that driver's license registration form can be considered form objects. You fill out the form (that is, you fill in all the form objects, or fields) and hand it back to the attendant for processing. Analogously speaking, the web is no different: Forms on the web contain form objects and in fact, are mutually exclusive.

Now that you have an idea about what forms and form objects are and when and where they are used, let's actually build them within the context of our project. Throughout the rest of the chapter, we'll dissect forms and the various types of form objects you can use when working with forms in Dreamweaver.