HTML Forms :
DROP DOWN MENU








Drop-down menus are probably the most flexible objects you can add to your forms.

Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed).

The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.
But that is also a disadvantage, because people can't see all options in the menu right away.

There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space.

So whatever you decide - there is always a bonus and a price to pay.




Sometimes you may want to replace text fields with drop-down menus. This might be because selecting from a menu is easier than typing. But it could also be because the script that handles the form can't interpret just any text entry.

For example, you will often be asked to choose your state from a drop-down menu. This might be because picking it from the menu is easier than typing the name of the state.

Along the same line, you may often asked to enter the 2 letter initials of your state from a drop-down menu as well.
This could prevent confusion for the script that handles the form input. If, say, the script was programmed to only accept capital letters, then a drop-down menu would secure that no invalid entries were made.




Another typical example would be replacing links with drop-down menus.

This can be done with javascript. If you're not into programming you can easily create a drop-down link menu with our online tool.




SETTINGS:

Below is a listing of valid settings for drop-down menus:


HTMLEXPLANATIONEXAMPLE
select
  name=
  size=
  multiple=

 
option
  selected
  value=

Drop-down menu
Name of the field.
Visible items in list.
Allows multiple choices if yes.

 
Individual items in the menu.
Default select the item.
Value to send if selected.




Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.

A typical example of the syntax would be:
<select>
  <option>Milk</option>
  <option>Coffee</option>
  <option>Tea</option>
</select>





The <select> tag defines the menu.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The size option defines how many items should be visible at a time. Default is one item.

The multiple setting will allow for multiple selections if present.




The <option> tag defines the single items in the menu.

The value setting defines what will be submitted if the item is selected. This is not always the same as what it says in the menu. If our field was defined this way:

<option value="ID">Idaho</option>

then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID" would actually be sent.

You can force an item to be default selected by adding the selected option: <option selected>




AN EXAMPLE:

Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>

</div>
</form>
</body>
</html>


And the resulting output from it:




 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"