Menus in Forms

The following form has two options. Select an option and press the button to find out what happens.

When choosing a destination, and pressing the button, the browser loads a URL (Uniform Resource Locator, the file!) Let's look at the code:


<form name="selecter" id="selecter" action="">

<select name="select1" id="select1" size="1">

<option value="none">

Select a page ...

<option value="none">

--------

<option value="index.htm">

Contents of HTML Tutorial

<option value="buttons.htm">

Buttons in Forms

</select>

<input type="button" value="Go there ..." onclick="go()" />

</p>

</form>


As you may realise, I have eventually cheated. This menu works on Java Script! However, for our purposes, the only bit of Java Script showing is the onclick="go()" bit. My excuse is that it is better to show a menu that does something than one which doesn't. And using Java Script is not worse than using a program on the server (cgi script). Let's examine the HTML. The menu uses a form field called SELECT. It has a name, select1, and a size, "1". The size determines how many options are displayed. Try copying the code and putting in different values. If you put 4 in, then all the options in this example will be shown.
<select name="select1" size="1">

There are several options. Each has a value, which is what the form will do if the item is selected, and after the option, there is some text, which is displayed in the menu. The first option shown below has a value of  "none", which is used by the program, in this case, to do nothing if the button is pressed when this option is selected. In the second case below, the value is an URL, and if this is selected, when the button is pressed that page is opened.

<option value="none">Select a page ...
<
option value="buttons.htm">Buttons in Forms

In the introduction page, a menu with many more items is shown.


[contents][back to: Buttons][up to: Forms]

[on to: Meta Tags]

[Home Page]


Most Recent Revision: 18-Oct-98.
Copyright 1998

I am always pleased to hear from you.
Send your comments to