---

A drop - down select box allows users to select one item from a drop - down menu. Drop - down select boxes can take up far less space than a group of radio buttons.

<select name="selGender">
	<option selected="selected" value=""> Select Gender </option>
	<option value="Male"> Male </option>
	<option value="Female"> Female </option>
	<option value="Others"> Others </option>
</select>

Live Preview

The <select> element is the containing element for a drop - down list box; it can take the attributes shown in the table that follows:

Attribute	Purpose
name	The name for the control.
size	Can be used to present a scrolling list box, as you will see shortly. Its value would be the number of rows in the list that should be visible at the same time.
multiple	Allows a user to select multiple items from the menu. If the attribute is not present, the user may select only one item. In earlier versions of HTML, this attribute did not have a value. However, to be valid XHTML it should be given the value of multiple (i.e., <select multiple= "multiple"> ). Note that the use of this attribute will change the presentation of the select box, as you will see in the section Selecting Multiple Options with the multiple Attribute later in this chapter.

Another Example

<select name="selColor" >
	<option selected="selected" value=""> Select color </option >
	<option value="red"> Red </option >
	<option value="green" > Green </option>
	<option value="blue"> Blue </option>
</select>

Live Preview

Creating Scrolling Select Boxes

As I mentioned earlier, it ’ s possible to create scrolling menus where users can see a few of the options in a select box at a time. In order to do this, you just add the size attribute to the <select> element. The value of the size attribute is the number of options you want to be visible at any one time.

<form action="/days.php" name="frmDays" method="get" >
<select size="4" name="selDay" >
	<option value="Mon"> Monday </option>
	<option value="Tue"> Tuesday </option>
	<option value="Wed"> Wednesday </option>
	<option value="Thu"> Thursday </option>
	<option value="Fri"> Friday </option>
	<option value="Sat"> Saturday </option>
	<option value="Sun"> Sunday </option>
</select >
<br> <br> <input type="submit" value="Submit">
</form >

Live Preview

Selecting Multiple Options with the multiple Attribute

The multiple attribute allows users to select more than one item from a select box. The value of the multiple attribute should be the word multiple in order for it to be valid XHTML (although earlier versions of HTML allowed this attribute to appear without a value). When you use this attribute it is always a good idea to tell people how to select multiple items: by holding down the control key and clicking on the items they want to select.

<form action="/days.aspx" method="get" name="frmDays" >
Please select more than one day of the week (to select multiple days
hold down the control key and click on your chosen days): <br / >
<select name="selDays" multiple="multiple" >
	<option value="Mon" > Monday </option >
	<option value="Tue" > Tuesday </option >
	<option value="Wed" > Wednesday </option >
	<option value="Thu" > Thursday </option >
	<option value="Fri" > Friday </option >
	<option value="Sat" > Saturday </option >
	<option value="Sun" > Sunday </option >
</select >
<br><br>
 <input type="submit" value="Submit" >
</form >

Live Preview

Grouping Options with the <optgroup> Element

If you have a very long list of items in a select box, you can group them together using the < optgroup > element, which acts just like a container element for all the elements you want within a group.

<form action=”/info.php" method="get" name="frmInfo">
Please select the product you are interested in: <br>
<select name="selInformation" >
	<optgroup label="Hardware" >
		<option value="Desktop" > Desktop computers </option >
		<option value="Laptop" > Laptop computers </option >
	</optgroup >
	<optgroup label="Software" >
		<option value="OfficeSoftware" > Office software </option >
		<option value="Games" > Games </option >
	</optgroup>
	<optgroup label="Peripherals" >
		<option value="Monitors" > Monitors </option >
		<option value="InputDevices" > Input Devices </option >
		<option value="Storage" > Storage </option >
	</optgroup >
	</select >
<br><br>
<input type="submit" value="Submit" / >
</form>

Live Preview

An alternative option for grouping elements is to add an < option > element that carries the disabled attribute, which you will learn about shortly

<form action="/info.php" method="get" name="frmInfo"> 
Please select the product you are interested in: <br><br>
<select name="selInformation" >
	<option disabled="disabled" value="" > — Hardware — </option >
		<option value="Desktop" > Desktop computers </option >
		<option value="Laptop" > Laptop computers </option >
	<option disabled="disabled" value="" > — Software — </option >
		<option value="OfficeSoftware" > Office software </option >
		<option value="Games" > Games </option >
	<option disabled="disabled" value="" > — Peripherals — </option >
		<option value="Monitors" > Monitors </option >
		<option value="InputDevices" > Input Devices </option >
		<option value="Storage" > Storage </option >
</select >
<br> <br> <input type="submit" value="Submit" / >
</form>

Live Preview

---