Skip to content
Related Articles

Related Articles

Improve Article
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>

Output:

             

optgroup tag with disabled attribute




My Personal Notes arrow_drop_up
Recommended Articles
Page :