Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Select and Option

### Pull-down menu

Example 3.8 - Pull-down List - Example 3.8 | <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

    <form method="get" action="https://cscie12.dce.harvard.edu/echo">
    Select your favorite New England states:<br/>
    <select name="state">
    <option value="CT">Connecticut</option>
    <option value="ME">Maine</option>
    <option value="MA">Massachusetts</option>
    <option value="NH">New Hampshire</option>
    <option value="RI">Rhode Island</option>
    <option value="VT">Vermont</option></select><br/>
    <input type="submit" name="action" value="Proceed"/>
    </form>

Select your favorite New England states:

### Scrollable list

Note: because scrollable lists are difficult for users, they are not typically used.

A scrollable list (`size` attribute) that can have multiple selections (`multiple` attribute):

Example 3.9 - Scrollable List - Example 3.9 | <form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> Select your favorite New England states:<br/><select name="state" size="3" multiple="multiple"><option value="CT">Connecticut</option><option value="ME">Maine</option><option value="MA">Massachusetts</option><option value="NH">New Hampshire</option><option value="RI">Rhode Island</option><option value="VT">Vermont</option></select><br/><input type="submit" name="action" value="Proceed"/></form>

- Markup
- Display

    <form method="get" action="https://cscie12.dce.harvard.edu/echo">
    Select your favorite New England states:<br/>
    <select name="state" size="3" multiple="multiple">
    <option value="CT">Connecticut</option>
    <option value="ME">Maine</option>
    <option value="MA">Massachusetts</option>
    <option value="NH">New Hampshire</option>
    <option value="RI">Rhode Island</option>
    <option value="VT">Vermont</option></select><br/>
    <input type="submit" name="action" value="Proceed"/>
    </form>

Select your favorite New England states:

Copyright © David Heitmeyer