• Choose a category
• All
• Classic-Fiction

Creating Multiple Selection Elements

Sometimes, you want to present the user with a list of choices and then have the user pick one of these elements. XHTML has a number of interesting ways to do this.

Making selections

The drop-down list is a favorite selection tool of Web developers for the following reasons:

♦ It saves screen space. Only the current selection is showing. When the user clicks the list, a series of choices drop down and then disappear again after the selection is made.

♦ It limits input. The only things the user can choose are things you’ve put in the list. This makes it much easier to handle the potential inputs because you don’t have to worry about typing errors.

♦ The value can be different from what the user sees. This seems like an odd advantage, but it does turn out to be very useful sometimes. I show an example when I describe color values later in this chapter.

Figure 7-6 shows a simple drop-down list in action.

Figure 7-6: The user can choose from a list of colors.

The code for this simple drop-down list follows:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

What are those funky #ff00ff things?

If you look carefully at the code for basicSelect.html, you see that the values are all strange text with pound signs and weird characters. These are hex codes, and they’re a good way to describe colors for computers. I explain all about how these work in Book II, Chapter 1. This coding mechanism is not nearly as hard to understand as it seems. For now though, this code with both color names and hex values is a good example of wanting to show the user one thing (the name of a color in English) and send some other value (the hex code) to a program. You see this code again in Book IV, Chapter 5, where I use a list box just like this to change the background color of the form with JavaScript.

The select object is a bit different from some of the other input elements you’re used to, such as

♦ It’s surrounded by a pair. These tags indicate the entire list.

♦ The select object has an id attribute. Although the select object has many other tags inside, typically only the select object itself has an id attribute.

♦ It contains a series of pairs. Each individual selection is housed in an set.

♦ Each tag has a value associated with it. The value is used by code. The value isn’t necessarily what the user sees. (See the sidebar “What are those funky #ff00ff things?” for an example.)

♦ The content between is visible to the user. The content is what the user actually sees.

Select boxes don’t require the drop-down behavior. If you want, you can specify the number of rows to display with the size attribute. In this case, the number of rows you specify will always be visible on the screen.

Building check boxes

Check boxes are used when you want the user to turn a particular choice on or off. For example, look at Figure 7-7.

Each check box represents a true or false value that can be selected or not selected, and the status of each check box is completely independent from the others. The user can check none of the options, all of them, or any combination.

Figure 7-7: Any number of check