Intermediate HTML

Lesson 4: Using forms to get visitor feedback

Another way of making choices

If you've got a whole lot of choices to offer your visitor, such as which of the fifty states he's from, I have just the element for you! Your text refers to it on page 276 as a "menu". I tend to think of it as a "select group", or a "dropdown".

Select groups are set up differently than radio button or checkbox groups. In a select group, you've got one overarching tag, and then a lot of member tags, like so:

<select name="states">
<option value="CT">Connecticut</option>
<option value="NY">New York</option>
<option value="NJ">New Jersey</option>
<option value="else">Anywhere else</option>
</select>

So. You have the <select> </select> tag starting and ending the choices. It's named, just as a radio button group is named. Then each choice is represented within the "select" tag by an option tag. As with radio buttons, you put the value you want to send to your program into a "value" attribute within the option tag. But notice this difference: The input tag used for radio buttons is a self-closing tag. The display text for each choice is displayed after the tag. The "option" tag, however, has a beginning and an end, like "table" tags. The text goes in between the tags. Hey, I don't make the rules.

It looks like this:

I've said that I frequently call this selector a dropdown. That's because you'll usually see it on a page as a little box with an arrow on the right that you can click on to get the selector to drop down to show the other available options for the element. Occasionally, you'll see a select element as a box that displays more than one element at a time. In this case, the elements not immediately visible don't drop down. They scroll within this box. You get this effect by adding a "size" attribute to the select tag. For example:

<select name="states" size="4">
<option value="CT">Connecticut</option>
<option value="NY">New York</option>
<option value="NJ">New Jersey</option>
<option value="else">Anywhere else</option>
</select>

Now it looks like this:

Try adding a select group to your form. Then put in the size attribute and see how different it looks. Any questions or comments, the forum is available.

  1  2  3  4  5