❮ Previous Next ❯

HTML <outgroup> tag

The <outgroup> tag is used to group related options together. It must be used within the <select> dropdown list.

Type: Not classified

Syntax of <outgroup> tag

<select>

  <optgroup label="Group name">
    <option>Option 1</option>
    <option>Option 2</option>
  </optgroup>

</select>

The label attribute is required for <outgroup> element to define.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Top 3 position holders</h2>

<select>

  <optgroup label="Class I">
    <option value="chaoba">Chaoba</option>
    <option value="tomba">Tomba</option>
    <option value="jackson">Jackson</option>
  </optgroup>

  <optgroup label="Class II">
    <option value="mahesh">Mahesh</option>
    <option value="tom">Tom</option>
    <option value="ling">Ling</option>
  </optgroup>

  <optgroup label="Class III">
    <option value="kesho">Kesho</option>
    <option value="roshan">Roshan</option>
    <option value="abhishek">Abhishek</option>
  </optgroup>

  <optgroup label="Class IV">
    <option value="angelina">Angelina</option>
    <option value="mary">Mary</option>
    <option value="tian">Tian</option>
  </optgroup>

  <optgroup label="Class V">
    <option value="champion">Champion</option>
    <option value="modhu">Modhu</option>
    <option value="jack">Jack</option>
  </optgroup>

</select>

</body>
</html>
Run The code »

Output on the browser

Top 3 position holders

The <outgroup> element helps in long drop-down lists having many values such that related groups are placed within one <outgroup> element.

For a big hotel, you can make a drop-down lists of the items available such as:

Code for the above example

<select style="width:auto; display:block; margin:10px 10px;">

  <optgroup label="Potato products">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </optgroup>

  <optgroup label="Ginger products">
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
  </optgroup>

  <optgroup label="Wheat products">
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
  </optgroup>

  <optgroup label="Rice products">
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
  </optgroup>

</select>


<select style="width:auto; display:block; margin:10px 10px;">
  <option value="">Number of Quantities</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


<button type="submit" style="margin-left:10px; background-color:#0aa06e; color:#ffffff; padding:10px 20px; border-radius:6px;">
  Click here to order
</button>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<outgroup> Yes Yes Yes Yes Yes

Attributes of <outgroup> tag

Attribute Value Note
disabled disabled It makes the <outgroup> element disabled (including all its option value).
label name It defines a name for the <outgroup> element.

Example of using both attributes


<select>

  <optgroup label="Class I" disabled >
    <option value="chaoba">Chaoba</option>
    <option value="tomba">Tomba</option>
    <option value="jackson">Jackson</option>
  </optgroup>

  <optgroup label="Class II">
    <option value="mahesh">Mahesh</option>
    <option value="tom">Tom</option>
    <option value="ling">Ling</option>
  </optgroup>
  
 </select>

Output

❮ Previous Next ❯