Selection Lists

Selection lists are the most unusual of form field types both because they use two containers for their definition (select and option) and they also have two separate display styles.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<h1>Selection Lists</h1>
<form action="#">
<select name="sel1" size="1">
<option value=" " selected="selected"> </option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>

<select name="sel2" size="2">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>

Here's what the Selection List page looks like in your web browser.

The first selection list uses a size="1" attribute. This defines the selection list as a dropdown list with only the selected entry being displayed. The second selection list specifies a larger number for the size attribute which converts the selection list from a dropdown list into a scrollable list showing the specified number of entries. If the size is set to the number of options contained within the list then the scrollbar will be removed and all entries will be displayed.

Other attributes that can be applied to the select container are name, id, and multiple="multiple" (which allows more than one option to be selected with the results being stored in an array.

The select container may only contain option containers. Each option may have a value attribute and one of them may have a selected="selected" attribute to indentify it as the selected attribute (if multiple selections are permitted then this can be set for multiple options). Each option contains the plain text description associated with that option that will be displayed in the selection list.

When an option is selected the value of that selected option is the value associated with the select.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow