Forms: INPUT, Part II

As was pointed out at the end of the last chapter, sometimes it is not very helpful to have an open text input. The SATs, for example, do not ask for essays, which are difficult to score and would take forever to process, but rather present a series of easily graded multiple-choice questions. Happily enough, this capability does exist in HTML forms.

Radio Buttons

This INPUT type is best used when you want the user to select one of a limited number of choices. For example, suppose you wanted to find out which computer operating system your users prefer. Of the six options provided, the user should only be able to pick one. The list will look something like this:

and act like this:

What happens, as you have seen, is that only one option can be chosen. If an option is already selected, then choosing another option will de-select the previously chosen option and select the new option. Since there is nowhere for the user to enter a value, however, the value of each option must be specified in the HTML markup itself, using the VALUE attribute.

   <P>
   Your favorite computer operating system:<BR>
   <INPUT type="radio" name="fav_os" value="mac">Macintosh<BR>
   <INPUT type="radio" name="fav_os" value="dos">DOS<BR>
   <INPUT type="radio" name="fav_os" value="win">Windows<BR>
   <INPUT type="radio" name="fav_os" value="win95">Windows95<BR>
   <INPUT type="radio" name="fav_os" value="os2">OS/2<BR>
   <INPUT type="radio" name="fav_os" value="unix">UNIX<BR>
   </P>

Again, the use of the VALUE attribute is required for radio-button inputs.

Now, the first thing that most people say upon seeing the above list is, "Oh ho, the author finally messed up! He's using the same name for every one of those INPUT tags, and I clearly remember him saying in Chapter 4 that you can't do that! Time to write e-mail!"

Before you start gleefully typing away, let me assure you that the above markup is one hundred percent correct. Furthermore, although it may seem like it right now, I have not contradicted what I said earlier. What I said was that each input needs to have a unique NAME. I did not say that each INPUT needs to have a unique NAME.

Right about now, many of you will be very intelligently saying, "What?" The difference is that the entire set of INPUT tags shown above may be considered to constitute one input. Let's call this a "logical input." A logical input may be composed of many, many INPUT tags-- theoretically, no limit exists-- but it will still return only one value, which is the value of the option selected by the user.

In fact, it is vital that each of the INPUT tags in a radio-button logical input have the same name. Otherwise, the browser has no way of knowing that the different INPUTs are all part of the same logical input. When you select a radio button, the browser checks to see if any other radio buttons with the same NAME are selected. If so, it de-selects that button for you automatically.

So, in the above example, assume I selected the first option, "Macintosh." The value of fav_os would then become mac. If I were to then change my mind and select the fifth option, then the value of fav_os would be os2. If no option is selected, then the value of fav_os would be nothing (not zero, but literally nothing).

But what if we want to let the user select more than one option at a time? Radio buttons won't allow that sort of thing. However...

Checkboxes

The HTML markup for a checkbox logical input looks very similar to that for radio buttons. The only structural difference is the use of TYPE="checkbox" instead of "radio". For example, let's assume that not only do we want to know which OS the user prefers (see above), but we also want to know which ones they've used, so that we can draw some sort of correlation between the two. Thus:

   <P>
   What operating systems have you used?<BR>
   <INPUT type="checkbox" name="os_used" value="mac">Macintosh<BR>
   <INPUT type="checkbox" name="os_used" value="dos">DOS<BR>
   <INPUT type="checkbox" name="os_used" value="win">Windows<BR>
   <INPUT type="checkbox" name="os_used" value="win95">Windows95<BR>
   <INPUT type="checkbox" name="os_used" value="os2">OS/2<BR>
   <INPUT type="checkbox" name="os_used" value="unix">UNIX<BR>
   </P>

Once again, VALUE is required for each INPUT tag, because the user has no way to input any values himself-- merely to select from a list of options. In a checkbox logical input, the user can select some, or all, or none of the options provided. Try it yourself:

So how do multiple responses get transmitted if there's only one value allowed for a given name? Let's assume that the user checks the boxes for Macintosh, DOS, and Windows95. The value of os_used would be mac|dos|win95, where the | represents a separator (usually a null character). There is one value for the NAME defined as os_used, but it contains all of the options which the user selected. The CGI program will need to be able to take the value and split it up into its components. Fortunately, most CGI languages have libraries which were written to accept form-entered data, so this should not be a problem.

Loading Your Questions

Of course, any good survey has an inherent bias, because otherwise you run the risk of having your assumptions challenged-- and you wouldn't want that, now would you? Besides the usual tricks like wording questions a certain way or putting the answers you want at the top of the list, you can present the user with pre-selected options, so that even if he doesn't touch any of the options, a given value will still be returned.

This is accomplished by using the CHECKED attribute. Simply adding this attribute to a radio or checkbox INPUT tag will cause that INPUT to be selected as soon as the page is loaded (or reloaded). For example, suppose you're going to ask a question you're pretty sure you know the answer to, but can't be completely certain.

Markup:

Are you breathing at the moment?
<INPUT type="radio" name="breathing" value="Y" checked>Yes
<INPUT type="radio" name="breathing" value="N">No

Result:

Are you breathing at the moment? Yes No

Obviously, you will want to use CHECKED on only one option in a radio-button logical input, as shown above, but multiple checkboxes in a given logical input could be set as CHECKED.

A Change of Pace

In the next chapter, I'll be talking about a completely new tag; in other words, we're leaving INPUT behind for a while. This new tag, called SELECT, will introduce an entirely new way to present choices to the users.

Chapter 6 Quiz
Next-- Chapter 7: Forms: SELECT
Previous -- Chapter 5: Forms: INPUT, Part I
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory