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

## optgroup

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

Example 3.16 - Form: optgroup in pull-down menus - Example 3.16 | <p>Select a school:</p><form method="get" action="https://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><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>

- 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