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:
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:
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:
Now let's add a few more menu items to our list and close the list by adding the closing </select> tag, like this:
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:
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:
<option value="bears" selected>Bears</option>
The dropdown menu, with the new default item is displayed in a browser like this:
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:
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: