Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Forms Tutorials

Drop Down Menus

The dropdown menu displays a list of selectable options in a small input field that can be dropped down to reveal multiple options. The dropdown format is handy for saving space in a form as the input field is only one line in height and it can be used to 'hide' long lists of menu options.

The dropdown menu form element is similar to an HTML Table since it uses more than one tag to build the dropdown list. The dropdown menu is coded using the <select> tag for the main input field, and the <option> tag to define each item to be added to the list.

Let's write a basic dropdownmenu input tag, step by step, to show how the tag is correctly coded. First we start with the opening select tag:

<select

Dropdown menus create a compact list of choices a visitor can choose answers from. In order to properly group the items into one menu, we need to give the menu a unique name:

<select name="unique_name">

Now we need to add the individual menu items to the menu. We use the <option> tag for each item. Each menu item must have a value defined,some text for the visitor to see and a closing </option> tag to be complete:

<select name="unique_name">
<option value="lions">Lions</option>

Now let's add a few more menu items to our list and close the list by adding the closing </select> tag, like this:

<select name="unique_name">
<option value="lions">Lions</option>
<option value="tigers">Tigers</option>
<option value="bears">Bears</option>
<option value="giraffes">Giraffes</option>
</select>

The dropdown menu code is now complete. Click the down arrow shown in the example below and the menu options you have coded will be displayed in a small dropdown list. The look of the text and colors of the list and it's box cannot be changed with basic HTML, but you can modify these areas with special CSS code (the subject of another tutorial). The dropdown displays in your browser like this:

Select the animal you like best: 

The <option> tag also allows you to choose any of the options to be displayed in the input box as the default selected item. Just add the word selected to the option tag of your choice, like this:

<select name="unique_name">
<option value="lions">Lions</option>
<option value="tigers">Tigers</option>

<option value="bears" selected>Bears</option>

<option value="giraffes">Giraffes</option>
</select>

The dropdown menu, with the new default item is displayed in a browser like this:

Select the animal you like best: 

You can also create a scrollable menu box just by adding a special size attribute to the <select> tag. The size attribute will change the number of lines that the menu initially displays from 1 to whatever number you specify in the code. Adding a size of any number greater than 1 will produce a scrollable menu.

This option works best with long lists of menu items so lets add some items to the list and change the size of the displayed dropdown box:

<select name="unique_name" size="3">
<option value="lions">Lions</option>
<option value="tigers">Tigers</option>
<option value="bears">Bears</option>
<option value="giraffes">Giraffes</option>
<option value="cows">Cows</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="gerbils">Gerbils</option>
</select>

The scrollable menu coding is now complete. We chose a size value of 3 for our menu, so now 3 menu items will be displayed when visitors view this input field. The rest of the list can be viewed by scrolling through the menu items. It will appear in your browser like this:

Select the animal you like best: