Html5 Optgroup Tag

In the html5 <optgroup> tag is used to group data options in a select list. If you have long list at select box use to <optgroup> tag for grouping data and it easily understand for user.In the <optgroup> tag label attribute is used to label for the option group and disabled attribute is used to disabled for <optgroup> tag.

Syntax:

<select>
  <optgroup>
   <option> ... </option>
  </optgroup>
</select>

Example Code

<select>
   <optgroup label="Alphabetical Letter">
   <option value ="sydney"> A </option>
   <option value ="melbourne"> B </option>
   <option value ="melbourne"> C </option>
   </optgroup>
   <optgroup label="Numeric Numbers">
   <option value ="cromwell"> 1 </option>
   <option value ="queenstown"> 2 </option>
   <option value ="queenstown"> 3 </option>
   </optgroup>
   <optgroup label="Symbols">
   <option value ="cromwell"> + </option>
   <option value ="queenstown"> - </option>
   <option value ="queenstown"> * </option>
   </optgroup>
</select>

Out Put:



In the above select list example <optgroup> tag has been added to Alphabetical Letter,Numeric Numbers and Symbols.you can not select <optgroup> options.





Content