Slide 15 - Select and Option § Session 03

Select and Option

Pull-down menu

Example 3.8 - Pull-down List - Example 3.8

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>

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

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>