HTML Selection Forms and Drop Down Lists (HTML Forms tutorials part 8)

Drop down lists are the basic selection forms. You have probably seen them already on the internet, maybe filling out a personal profile and selecting the state in which you live. Drop down lists have several options a user can select.

HTML Code:

<select>
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Drop Down List:

By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.

HTML Code:

<select>
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option selected="yes">Conneticut -- CN</option>
</select>

Drop Down List:

HTML - Selection Forms

We use the size attribute to break out from the single displayed drop down list.

HTML Code:

<select size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Selection Forms:

HTML - Selecting Multiples

We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.

HTML Code:

<select multiple="yes" size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Multiple Selections:

Now the user may select any or all states that apply to them.