Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

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.

More HTML Code:
• Aligning an Image on Your Web Page
• Easy Code to Add Google Site Search to Your Website
• How to Troubleshoot an HTML Table
• HTML DIV Basics
• XHTML Basics
• Adding Space Around an Image
• HTML Horizontal Rule
• Setting the Number of Items Visible in a Select List
• Form Input Labels
• Image Map Basics

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268