The optgroup element allows you to group a long select list.
<p>Select a school:</p>
<form method="get" action="http://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