Optgroup tag in HTML

byHTML galaxy - 0

Optgroup tag used in forms for naming a matching elements in a category.

  • It is represented using <optgroup>.

Example:

  1. Bread, Cake, Puffs are belongs to the category of Baked items.
  2. Pista , Butterscotch, Blackcurrent are belongs to the category of Ice creams.
  3. Apple, Mango, Banana are belongs to the category of Fruits.

Step-1:How to create optgroup in HTML:

By using optgroup tag. Use lable attribute inside option tag.

<form>
Please choose your menu:
     <select>
         <optgroup label="Baked items">
              <option value="Bread">Bread</option>
              <option value="Cake">Cake</option>
              <option value="Puffs">Puffs</option>
         </optgroup>
     </select>
  </form>


Output :

Please choose your menu :       .

Let's create for more items:

<!DOCTYPE html>
<html>
<head>
    <title>
        optgroup
    </title>
</head>
<body>
    <form>
        <select>
              <optgroup label="Fruits">
                  <option value="Apple">Apple</option>
                  <option value="Banana">Banana</option>
                  <option value="Mango">Mango</option>
              </optgroup>
              <optgroup label="Biscuits">
                <option value="Britania">Britania</option>
                <option value="Marie-gold">Marie-gold</option>
             </optgroup>
              <optgroup label="Baked-items">
                <option value="Bread">Bread</option>
                <option value="Cake">Cake</option>
                <option value="Puffs">Puffs</option>
             </optgroup>
         </select>
    </form>
</body>
</html>

Output:

Please choose your menu  :   
Tags:

Post a Comment

Post a Comment (0)

Previous Post Next Post