Use selection menus to allow choices from pre-defined lists of values. This is useful both as a means of standardizing data and as a time saver for the user of the form.

A selection menu consists of opening and closing <select> tags containing several <option> tags, corresponding to each possible value of the form field. Within the <select> tag you specify the field’s NAME, while the VALUE can either be given explicitly within each <option> tag, or will default to the text following the <option> tag if no VALUE is given. Either way the text following the <option> tags is what will appear in the menu on the web page.

For example:

<form>
My affiliation is:<br>
<select name="affiliation">
<option value=""> --select-- </option>
<option> Faculty </option>
<option> Staff </option>
<option> Student </option>
<option> Other </option>
</select>
</form>

My affiliation is:

The width of your selection menu is determined by your longest text element. If you have a long list of options, or you wish to separate your options into logical categories, you can use an <OPTION> tag with an empty VALUE=”” followed by several hyphens ( ———– ) and this will show up in your list as a separator.

Notice that by default selection menus act as drop-down menus. You can make these into scrolling selection boxes by changing the SIZE attribute from its default setting of 1.

Another attribute, MULTIPLE, creates selection menus from which users can choose more than one option, by using CTRL-Click (PC) or Command-Click (Mac).

For example:

<form>
I am affiliated with the:<br>
<select name="school" size="10" multiple>
<option value="cas"> College of Arts & Sciences </option>
<option value="cfa"> College of Fine Arts </option>
<option value="com"> College of Communication </option>
<option value="sed"> School of Education </option>
<option value="eng"> College of Engineering </option>
<option value="cgs"> College of General Studies </option>
<option value="sar"> Sargent College </option>
<option value="smg"> School of Management </option>
<option value="met"> Metropolitan College </option>
<option value="ssw"> School of Social Work </option>
<option value="sth"> School of Theology </option>
<option value="law"> School of Law </option>
<option value="med"> School of Medicine </option>
</select>
</form>

Produces the following:

I am affiliated with the: