Quick link to menu (Bottom of page)

Learn-A-Little HTML

Menu

Menus also allow the user to choose from predetermined options.  Unlike the other Input types we've looked at, menus use the <SELECT> tag instead of the <INPUT> tag.  We can create scrolling or pop-up menus.  <SELECT> is also different in that it is a container tag.  The <SELECT> tag also requires a NAME attribute, and lets you decide how many options you want to display at one time by using the SIZE attribute.

The format for the <SELECT> tag is as follows:

<SELECT NAME="variable">
<OPTION SELECTED VALUE="value">text
<OPTION VALUE="value">text
</SELECT>

The SELECTED attribute in the first option simply indicates that this option is the default value.  The "value" is what gets sent to the server for processing.

 

Look at this example:

Choose your favorite car: <BR>
<SELECT NAME="car">
<OPTION SELECTED VALUE="corv">Corvette
<OPTION VALUE="vip">Viper
<OPTION VALUE="lamb">Lamborghini
<OPTION VALUE="ferr">Ferrari


In a browser, it looks like this:

Choose your favorite car:

 

If we only have a few options, and we want to display all of them at once, we use the SIZE attribute.  Using the example above, we only need to change the first line to read:

<SELECT NAME="car" SIZE="4">

The rest stays the same.  Our menu now looks like this:

Choose your favorite car:
 

 

Both of these examples only allow one option to be selected.  If you want to allow more than one option to be selected, just add the MULTIPLE attribute like this:

<SELECT NAME="car" MULTIPLE>

By holding down the Ctrl key while making their selections, more than one item can be selected.

 

Now you try it:

 


We can create these fancy forms and gather lots of user input, but so far, we have not been able to actually send it to the server.  Let's talk about the Submit and Reset buttons.

BackNext Page

Menu:


Take me back to the top.