Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## optgroup

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

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

- Markup
- Display
- Screenshot

    <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:

Copyright © David Heitmeyer