Free design,web development-pull down menu forms

Pull-down menus and their cousin, the scrolling list, are created using a different form element: The <SELECT> tag. This tag has a number of attributes that control how it is displayed in your page and its interaction methods.

In its simplest form, the <SELECT> tag is simply a container for one or more <OPTION> tags. Each <OPTION>, defines one of the items that the user can select within the <SELECT> tag. Here is a <SELECT> element that allows the user to select one of four shipping methods:

     <SELECT>

        <OPTION>Introduction </OPTION>

        <OPTION>Company Policies </OPTION>

        <OPTION>Product Listing </OPTION>

        <OPTION>Shop Now ! </OPTION>

     </SELECT>

The resulting pull-down menu looks like this:

Both Netscape and Internet Explorer should display a simple pull-down menu.

The only thing you can put within a <SELECT> tag are <OPTION> tags; general HTML content is not allowed and may confuse the browser.

The only format allowed within an <OPTION> tag is text. HTML markup, anchors, images, and others are not allowed and is ignored by the browser.

Assigning names and values

As our examples shows, it is useless. Without names and values, your form can not communicate the user's choice back to the server-side forms processing program.

Unlike other form elements, the name and value attributes for pull-down menus are shared between the <SELECT> and <OPTION> tags. You must assign a name to the <SELECT> tag, but you assign the values to the <OPTION> tags.

To make our example work, we will add these attributes:

     <SELECT NAME="finalhost">

        <OPTION VALUE="Next AM">Introduction </OPTION>

        <OPTION VALUE="Next PM">Company Policies </OPTION>

        <OPTION VALUE="Second">Product List </OPTION>

        <OPTION VALUE="Parcel">Shop Now ! </OPTION>

     </SELECT>

When the user makes a choice the name finalhost will be set to the appropriate value and passed to the server for processing.

To make life a bit easier, you need not assign an explicit value attribute to each <OPTION> tag. If no value is defined, the text contained in the <OPTION> tag becomes the value sent to the server when the form is processed. If your menu items are short and not likely to change, this shortcut may be worth taking. However, if the items are long or may change you are better off including explicit value attributes for each <OPTION> tag.

Defining default values

By default, there is no initially selected item in a pull-down menu, and the first <OPTION> tag is displayed as the value of the menu. If the user does not explicitly select an item from the menu before submitting the form, the value of the <SELECT> tag may not even be sent to the server for processing.

To prevent this, you should always define selected option within the pull-down menu. You do this by adding the selected attribute to one of the <OPTION> tags. Having done so, this item will be displayed as the initial value of the menu, and its value will be transmitted to the server for processing, even if the user does not explicitly select it as a value. For example, by adding selected to the third option in our example, the menu is initially displayed as:

Your browser should show the menu with "Product List" displayed as its value.

We've relied on other default values within the <SELECT> tag to create our pull-down menus. Altering the values of other attributes will convert a pull-down menu into a scrolling list.

<< BACK

Creating Form Pull-Down Menus