Forms -Select Lists

Forms - Select

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Forms
         How forms are sent
         Input field
         Buttons
         Input types
         Fieldset
         For more help...
         You try it
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Select your options:
The final cool thing you are going to learn that could qualify as an input field is the <select> tag. This tag also needs an "end select" </select> tag. This tag is used for the creation of drop-down lists. Look at this one: Basic Tags
You will actually use two kinds of tags to make a list like this. The whole list is contained between the <select> tags, but a different tag goes with every item on the list. That tag is <option> and there is no </option> tag.

Code
<form> <select> <option>Cat <option>Dog <option>Fish </select> </form>

What you see

Name
This is a very basic list, but there are things you need to do to it to make it functional. First of all, the list really needs a name. The list above may be called "birth month" or whatever you'd like. Let's look at the second, shorter list. I'd name this list "pets" because it's descriptive. The name goes in the <select> tag.

Code
<form> <select name="pets"> <option>Cat <option>Dog <option>Fish </select> </form>

What you see

Multiple
If you want the user to be able to select several items, you can use the command MULTIPLE within the <select> tag. Multiple items can be selected by holding down the shift or control key while clicking the mouse. It might be easier using the "checkbox" command instead.

Code
<form> <select MULTIPLE> <option>Cat <option>Dog <option>Fish </select> </form>

What you see

Size
You can specify the number of items you'd like displayed by listing a size/ For example, on the upper lists, you noticed that only one item was displayed at a time. Perhaps you'd like two?

Code
<form> <select size="2"> <option>Cat <option>Dog <option>Fish </select> </form>

What you see

That covers the main modifications for the "select" tag. There are also modifications for the "option" tag.

Value
It's VERY important that you put a value in the option tag or you won't know what the clicked on! The value may be the same thing as the word they see, or you can add your own value. Check this out:

Code
<form> <select> <option value="meow">Cat <option value="woof">Dog <option value="gurgle">Fish </select> </form>

What you see

The meows and woofs would be sent to you when the form is returned.

Selected
You can pre-select one or more items on a list, and the items don't have to be at the top.

Code
<form> <select> <option>Cat <option SELECTED>Dog <option>Fish </select> </form>

What you see

Blank?
You might want to have a blank at the top of your list as your default. This allows the user to have nothing selected in a list. To do this, simply make a blank option.

Code
<form> <select> <option> <option>Cat <option>Dog <option>Fish </select> </form>

What you see

Lots of information, but it will be useful to you when you're making a form. Here's a list example with these elements put together:

Code

<form>
<select name="birth month" size="3" >
<option value="Blank">
<option value="Jan">January
<option value="Feb">February
<option value="Mar">March
<option value="Apr">April
<option value="May" SELECTED>May
<option value="Jun">June
<option value="Jul">July
<option value="Aug">August
<option value="Sep">September
<option value="Oct">October
<option value="Nov">November
<option value="Dec">December
</select>
</form>

What you see