Adding Structure to a select Element

You can add some structure to a select element by using the optgroup element.

The label attribute lets you create a title for the grouped options. The disabled attribute lets you prevent the user from selecting.

      <form method="post" action="http://yourServer/form">
            <input type="hidden" name="recordID" value="1234" />
                  <label for="name"> Name: <input value="Adam" id="name"
                        name="name" />
                  <label for="password"> Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password" />
                  <label for="fave" style="vertical-align: top"> Favorite: 
                  <select id="fave" name="fave">
                              <optgroup label="Top Choices">
                                    <option value="apples" label="Apples">Apples</option>
                                    <option value="oranges" label="Oranges">Oranges</option>
                              <optgroup label="Others">
                                    <option value="cherries" label="Cherries">Cherries</option>
                                    <option value="pears" label="Pears">Pears</option>
            <input type="submit" value="Submit" />
Click to view this demo.
  HTML CSS Book 

  1. Creating Lists of Options
  2. Using the size and multiple Attributes on the select element
  3. Adding Structure to a select Element