How to specify a label for an optgroup tag in HTML5 ?

Last Updated : 17 Mar, 2021

The HTML <optgroup> element creates a grouping of options within a <select> element.

The HTML <optgroup> label Attribute text is used to specify a label for an option-group. The disabled attribute is used to specify that an option-group should be disabled.

Syntax:

<optgroup label="name">

Example 1: The following example demonstrates the simple optgroup tag in HTML5.

HTML

<!DOCTYPE html> 
<html> 
<body> 
  
<h1>The optgroup element</h1> 
  
<form action=""> 
  <label for="travel">Choose a mode to travel:</label> 
  <select name="travel" id="travel"> 
    <optgroup label="Two Wheelers"> 
      <option value="cycle">Cycle</option> 
      <option value="motor_cycle">Motor Cycle</option> 
    </optgroup> 
    <optgroup label="Four Wheelers"> 
      <option value="car">Car</option> 
      <option value="bus">Bus</option> 
    </optgroup> 
  </select> 
  <br><br> 
  <input type="submit" value="Submit"> 
</form> 
   
</body> 
</html> 

Output:

Example 2: The following example demonstrates the optgroup tag with a disabled attribute.

HTML

<!DOCTYPE html> 
<html> 
<body> 
  
<h1>The optgroup element</h1> 
<form action="/action_page.php"> 
  <label for="food_chain">Choose an animal:</label> 
  <select name="food_chain" id="food_chain"> 
    <optgroup label="Herbivores"> 
      <option value="cow">Cow</option> 
      <option value="deer">Deer</option> 
    </optgroup> 
    <optgroup label="Carnivores"> 
      <option value="tiger">Tiger</option> 
      <option value="lion">Lion</option> 
    </optgroup> 
    <optgroup label="Omnivores" disabled> 
      <option value="dog">Dog</option> 
      <option value="fox">Fox</option> 
    </optgroup> 
  </select> 
  <br><br> 
  <input type="submit" value="Submit"> 
</form> 
   
</body> 
</html>