08/09/2011

HTML Optgroup Tag

by Cyle
Categories: Web Development
Tags: , ,
Comments: Leave a Comment

The optgroup tag is not known to many developers. Basically the tag adds a header or category title to your drop down lists. It is very helpful when used in forms and you need to categorize items in your drop down menus. The optgroup tags are not selectable themselves and only serve as a header or separation between items.

Example:
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="---------------">
    <option value="other">Other</option>
  </optgroup>
</select>

Result:



 
Notice how the optgroup titles cannot be selected. The styling of the titles can also be changed using CSS (<optgroup label="Swedish Cars" style="font-size:20px;">, etc.).


Leave a Reply

Your email address will not be published. Required fields are marked *



user-avatar
Today is Sunday
03/26/2017