optgroup

The optgroup element allows you to group a long select list.

Example 3.14 - Form: optgroup in pull-down menus - Example 3.14

 <p>Select a school:
 </p>
 <form method="get" action="https://cscie12.dce.harvard.edu/echo">
   <select name="school">
     <optgroup label="ACC">
       <option>Boston College       </option>
       <option>Clemson       </option>
       <option>Duke       </option>
       <option>Florida State       </option>
       <option>Georgia Tech       </option>
       <option>Louiville       </option>
       <option>Miami       </option>
       <option>North Carolina       </option>
       <option>North Carolina State       </option>
       <option>Notre Dame       </option>
       <option>Pitt       </option>
       <option>Syracuse       </option>
       <option>Virginia       </option>
       <option>Virginia Tech       </option>
       <option>Wake Forest       </option>     </optgroup>
     <optgroup label="Big 10">
       <option>Illinois       </option>
       <option>Indiana       </option>
       <option>Iowa       </option>
       <option>Maryland       </option>
       <option>Michigan       </option>
       <option>Michigan State       </option>
       <option>Minnesota       </option>
       <option>Nebraska       </option>
       <option>Northwestern       </option>
       <option>Ohio State       </option>
       <option>Penn State       </option>
       <option>Purdue       </option>
       <option>Rutgers       </option>
       <option>Wisconsin       </option>     </optgroup>
     <optgroup label="Big XII">
       <option>Baylor       </option>
       <option>Iowa State       </option>
       <option>Kansas       </option>
       <option>Kansas State       </option>
       <option>Oklahoma       </option>
       <option>Oklahoma State       </option>
       <option>Texas       </option>
       <option>Texas Christian       </option>
       <option>Texas Tech       </option>
       <option>West Virginia       </option>     </optgroup>
     <optgroup label="Ivy League">
       <option>Brown       </option>
       <option>Columbia       </option>
       <option>Cornell       </option>
       <option>Dartmouth       </option>
       <option>Harvard       </option>
       <option>Penn       </option>
       <option>Princeton       </option>
       <option>Yale       </option>     </optgroup>
     <optgroup label="Pac 12">
       <option>Arizona       </option>
       <option>Arizona State       </option>
       <option>California       </option>
       <option>Colorado       </option>
       <option>Oregon       </option>
       <option>Oregon State       </option>
       <option>Stanford       </option>
       <option>UCLA       </option>
       <option>USC       </option>
       <option>Utah       </option>
       <option>Washington       </option>
       <option>Washington State       </option>     </optgroup>   </select>
   <div>
     <input type="submit"/>

   </div>
 </form>

Select a school:

 

optgroup illustration

optgroup illustration