MacBoy's
Super Simple FORM TUTORIAL
for GeoCities, Part 4:
 Lists

The Last Two Items

On this final page of the Super Simple Form Tutorial, we'll get to see the The Multiple Select List and the Drop Down List. Note that both lists are created using the same code, but changing only one parameter...

The Multiple Select List

Keeping with our Ice Cream Theme, we want the reader to select any or all of the following choices.

Choose as many flavours as you like:
(Multi- or de-select using command-click)


If OTHER, please specify:

Here's our source code:

Choose as many flavours as you like:<br>
<font size="-1">(Multi- or de-select using command-click)</font><p>

<SELECT MULTIPLE NAME="Favourite">
<Option VALUE="Chocolate">Chocolate/Chocolate Chip
<Option VALUE="Peanut">Peanut Brittle/Vanilla
<Option Selected VALUE="Cookie">Cookie Batter
<Option VALUE="Blueberry">Vanilla/Blueberry
<Option VALUE="Caramel">Caramel Swirl
<Option VALUE="Other">Other...
</select><br>
If OTHER, please specify: <br>
<input type="text" NAME="Favourite- other"><p>

Note that there is no <br> after each OPTION line. They automatically move to the next line.
The "Other" selection and text box was included as a possible way of letting people send an alternative flavour.
"Cookie Batter" is made the default choice by adding "Selected" to it's option line.

The WIDTH of this box is dependant on the width of the longest item in the list.
The HEIGHT of this box is presently unset, so all your choices are visible. If you have a really long list, you can limit how many lines show by including "SIZE" in the SELECT tag:
<SELECT MULTIPLE NAME="Favourite" size=5> for example, will only show 5 lines in this expanded list.


Pull Down List

The Pull Down List allows the reader to choose ONE item from the offered list. Once again, we've included an "Other" selection to allow for an alternative choice.

Choose your favourite flavour:

If OTHER, please specify:

Here's our source code:

Choose your favourite flavour:<br>

<SELECT NAME="Favourite">
<Option VALUE="Chocolate">Chocolate/Chocolate Chip
<Option VALUE="Peanut">Peanut Brittle/Vanilla
<Option Selected VALUE="Cookie">Cookie Batter
<Option VALUE="Blueberry">Vanilla/Blueberry
<Option VALUE="Caramel">Caramel Swirl
<Option VALUE="Other">Other...
</select><br>
If OTHER, please specify: <br>
<input type="text" NAME="Favourite- other"><p>

As you can see this form is basically the same as the Multiple Select List, but with the "MULTIPLE" removed from the opening "SELECT" tag.
We're done!

That's it! You have here all the fixings for a good, clean and simple form. From here, the other possibilities are pretty much in the layout of your form. You can get creative and use multiple forms each with a submit button, set your form within a table (with or without borders) for visual alignments, or even use list tags to offset separate aspects of your questions. And of course, as you've seen right here in this tutorial, you can separate with Horizontal Rules and any text you can use in a regular HTML document.

I hope you've found this tutorial to indeed BE "Super Simple" and that you're now comfortable enough to get working on your own page's form. And now, if I could indulge you just a little more....

Please go to THIS page....

Front Page | Before we start...
PART ONE: The Basic Form | PART TWO: What Happens
PART THREE: Form Buttons | PART FOUR: Lists
Survey Form | What You've Said...
F.A.Q.: Troubleshooting

Need More Help?

If you need further help with your form, visit the Counters, Forms & Imagemaps Help Forum. Please read the posts that are already up to make sure your question has not already been asked and answered. If you don't see your question covered already, just add it in, making CERTAIN that you add the URL to the problem form, if it's in your directory.
LinkExchange
LinkExchange Member Free Home Pages at GeoCities

© 1997 MacBoy