Multiple Drop Down Choices in a Form

One of the most common things done on a web page is to use a form to gather information.  We have all filled out online forms where your home "State" is asked for.  This is usually presented to you as a drop down list of all our states.

The advantage of doing it this way for the developer is he can make sure he gets the state information in a format that he would like.  That is, he may want the information to come back as MD, or, a number like '13', or the full name, Maryland, for example.  The drop down selection box forces the form submitter to make a choice that the developer can then format anyway he likes with less chance of having bogus information entered.  A win-win for everyone.

The drop down box is put up inside a form block in XHTML with a select tag followed by a listing as a series of option tags corresponding to each option you would like in your list.  Here's a car type example:

<select name="car_type" size="5">
<option value="1">sedan</option>
<option value="2">hatchback</option>
<option selected="selected" value="3">coupe</option>
<option value="4">suv</option>
<option value="5">hybrid</option>
</select>

This puts up a nice neat drop down box with the selections you specified in the options.  Some explanations:

VALUE.  The value within the option tag is the value that will be returned when the form is submitted if that option is chosen.

SELECTED.  If you would like to display a choice in window of the drop down box, use selected with the option you want to display in the form.   In the example, coupe will show up in the drop down box window.  If you don't use selected, the default is the first option displayed in the drop down box.  If you want nothing in the window, then include a blank option tag at the top of the list of options.

There are several choices you can specify with the select tag: name, size, disabled, multiple.

NAME. Name is the name of the select box. This is used to identify that particular drop down box when your retrieving the information from the form in another file.

SIZE. Size is the number of options you would like to make visible at one time when you press the drop down arrow.  Do you want to display all 52 states, or display 6 and make the user scroll to get other state names?

DISABLED.  Disabled is used when you want to show your choice, but not allow your user to select a new choice. It displays the previous choice, but disables and "grey's out" the control so it can't be used.

<select disabled="disabled" name="state" size="6">

MULTIPLE.  We use this if we want to be able to select more than one choice in the drop down list.  For example, you have a list of names and want to include a small group to form a sub-group of names.

<select name="state" size="6" multiple="multiple">

The drop down box is used a lot, because it takes up less space in the form than if we put up a series of checkboxes, where all your choices would need to be displayed in the form.

What happens behind the scenes?

When the user clicks submit after, hopefully, filling in the form drop down box, the program "posts" the forms information in the page specified in the form "action."   In this case, "http://www.mypage.com"  You retrieve the form information on that page with a statement like this in php:

$car_type = $_POST['car_type'];

If the information is a multiple select drop down, you tell the select tag in the form that this is multiple select in two ways, with the tag multiple="multiple",  and also in the name with a [], to signify this is an array of the user's choices,  like so:

An array of data
<select name="car_type[]"  multiple="multiple">

This becomes an array in the form returned to php with all the drop down choices in the array, like this:  $cars = $_POST['car_type'];   In this example, the variable $cars is an array containing all your choices in the multiple drop down box.

Comments are closed.