A pull-down menu allows users to choose a single item from a predefined list of options. The size attribute's value of 1 tells the browser that you want the list to be in a pull-down menu format.
Within the select element, you create an option element for each of your options.
Place the option label between the <option> ... </option> tags.
Each option element can have an optional value attribute, which is the value sent to the server if that option is selected.
If you don't include a value attribute, the text between the <option> ... </option> tags is sent instead:
<label for="pullDownMenu">A pull-down menu</label> <select name="pullDownMenu" id="pullDownMenu" size="1"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
A list box works like a pull-down menu, except that it displays several options at once.
To turn a pull-down menu into a list box, change the size attribute from 1 to the number of options to display at once:
<label for="listBox">A list box</label> <select name="listBox" id="listBox" size="3"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
A multi-select list box allows the user to select multiple items at once by holding down Ctrl or Command key.
To turn a normal list box into a multi-select box, add the attribute multiple with a value of "multiple" to the select element.
If the user selects more than one option, all the selected values are sent to the server:
<label for="multiListBox">A multi-select list box</label> <select name="multiListBox" id="multiListBox" size="3" multiple="multiple"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
You can preselect an option in any type of select element by adding the attribute selected="selected" to the relevant <option> tag - for example: <option value="option1" selected="selected">.
Name the following script as index.php. It has a multi-select list box.
<html> <body> <div> <form action="index.php" method="post"> <p><select name="products[]" multiple="multiple"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select></p> <p><input type="submit" value="hit it!" /></p> </form> </div> </body> </html>
The following script is for index.php.
<?php/*from ww w . j ava 2 s . c o m*/
if (is_array ( $_POST ['products'] )) {
print "<p>Your product choices are:</p>";
print "<ul>";
foreach ( $_POST ['products'] as $value ) {
print "<li>$value</li>\n";
}
print "</ul>";
}
?>