HTML Select Tag

The select tag creates a drop down list and can also create a list box.

Syntax

<select>
<option value="value">text</option>
</select>

The option tag creates each drop down list item. The value attribute gives each item a value.

Sponsored Links

Example

<select name="age" id="age">
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20+</option>
</select>

Output

List Box

With the select tag you can also create a list box; the syntax is as follows:

<select name="name" size="number of items to show" multiple="multiple">
<option value="value">text</option>
</select>

It is not necessary to have multiple attribute, however if you do include it then users can select multiple values by holding down the CTRL key.

Example

<select name="food" size="3" >
    <option value="pizza">pizza</option>
    <option value="pasta">pasta</option>
    <option value="chips">chips</option>
</select>

Output

The width of the list box will automatically adjust to the longest option.

Grouping Items

You can also group items using the <optgroup> tag.

Syntax

<optgroup label="group name">
<options>
</optgroup>

Example

<select name="games" size="8" >
<optgroup label="Action & Adventure">
    <option value="MW3">Modern Warefare 3</option>
    <option value="BF3">Battlefield 3</option>
    <option value="GTA4">Gran Theft Auto 4</option>
<optgroup>

<optgroup label="Racing">
    <option value="GRID">Race Driver Grid</option>
    <option value="NFS">Need For Speed</option>
    <option value="GT">Gran Turismo</option>
</label>
</select>

Output

Try It!

(You can select multiple options for the list box.)