Menu
HTML Select List Basics

An HTML Select list is a form control used to create a drop-down list of items from which the user can select. Each item in a select list is defined by an option element. The most basic code for an HTML select list is shown below.

<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>

Some Useful Select List Attributes

The selected attributes causes an option to be selected by default.

<select>
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Fruit"  selected="selected">Fruit</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
<option value="Wine">Wine</option>
</select>

The multiple attribute allows the user to select multiple items in the list. Note: the user must press and hold the [Ctrl] key while selecting multiple items.

<select multiple="multiple">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Fruit">Fruit</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
<option value="Wine">Wine</option>
</select>

The size attribute sets the number of items that will be visible in the list.

<select size="3">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Fruit">Fruit</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
<option value="Wine">Wine</option>
</select>

Using a Select List

When the user selects one of the items in a select list, an onchange event is triggered. The selectedIndex property will then contain the index of the item that the user selected. Select list option indexes start with 0 for the first item.


Learn more at amazon.com

More HTML Code:
• HTML abbr and acronym Tag
• Nesting HTML Lists
• Can Enterprise Applications Be Made Using HTML5?
• Using del and ins Tags to Mark Up Editing on HTML Page
• How to Make a Table Scroll
• Set Form Controls Tab Order With tabindex Attribute
• HTML SPAN Basics
• How to Troubleshoot an HTML Table
• Create a Meta Tag Slide Show - No Java Script Required
• Adding Space Around an Image