Lists and Combo Boxes

For an example of a Combo List Box, click here. You can also view some of Stephanie's Web Database Pages here.

This is least amount of HTML Code required to make a List (Defaults to Combo Box):
<SELECT> <OPTION VALUE="Hello World">Hello World</OPTION> </SELECT>	<-- the SELECT Opening Tag, <-- the OPTION Opening Tag, Your Item and the Closing Tag, <-- the SELECT Closing Tag.

This Code will produce this:

You can turn the Combo Box into a True List:
<SELECT SIZE=5> <OPTION VALUE="Hello World">Hello World</OPTION> </SELECT>	<-- change the SIZE Property, <-- the OPTION Opening TagYour Item and the Closing Tag, <-- the SELECT Closing Tag.

This Code will produce this:

Of course, you can add More Options to your List:
<SELECT SIZE=5> <OPTION VALUE="Hello World">Hello World</OPTION> <OPTION VALUE="My Name is Dennis Kennedy">My Name is Dennis Kennedy</OPTION> <OPTION VALUE="A Third Option">A Third Option</OPTION> <OPTION VALUE="A Fourth Option">A Third Option</OPTION> </SELECT>	<-- the SELECT Closing Tag. <-- the OPTION Opening TagYour Item and the Closing Tag, <-- a Second OPTION, <-- a Third OPTION, <-- a Fourth OPTION, <-- the SELECT Closing Tag.

This Code will produce this:

(Notice how the Width changed for the Longest Message.)

You can Set which Option is Selected in your List:
<SELECT SIZE=5> <OPTION VALUE="Hello World">Hello World</OPTION> <OPTION VALUE="My Name is Dennis Kennedy", SELECTED>My Name is Dennis Kennedy</OPTION> <OPTION VALUE="A Third Option">A Third Option</OPTION> <OPTION VALUE="A Fourth Option">A Third Option</OPTION> </SELECT>	<-- the SELECT Closing Tag. <-- the OPTION Opening TagYour Item and the Closing Tag, <-- the SELECTED OPTION, <-- a Third OPTION, <-- a Fourth OPTION, <-- the SELECT Closing Tag.

This Code will produce this:

Why does the OPTION have Two 'Hello World's?
<SELECT> <OPTION VALUE="Hello World">Hello World</OPTION> </SELECT>	<-- the SELECT Opening Tag, <-- two 'Hello World's, <-- the SELECT Closing Tag.
The First 'Hello World' (inside the quotes) is what would be sent to a CGI Script. The Second 'Hello World' is what appears in your Listbox.

The two 'Hello World's don't have to be the Same:
<SELECT SIZE=5> <OPTION VALUE="HW">Hello World</OPTION> <OPTION VALUE="DK", SELECTED>My Name is Dennis Kennedy</OPTION> <OPTION VALUE="3">A Third Option</OPTION> <OPTION VALUE="4">A Third Option</OPTION> </SELECT>	<-- the SELECT Closing Tag. <-- Sent vs. Diplayed, <-- Sent vs. Diplayed, <-- Sent vs. Diplayed, <-- Sent vs. Diplayed, <-- the SELECT Closing Tag.

This Code will produce this:

Note that Netscape requires SELECT to be inside a <FORM></FORM>. This is where you would use them, anyway.

Back to the Table of Contents