El elemento HTML <optgroup> crea una agrupación de opciones dentro de un elemento <select> .
El texto de atributo de la etiqueta HTML <optgroup> se utiliza para especificar una etiqueta para un grupo de opciones. El atributo disabled se usa para especificar que un grupo de opciones debe estar deshabilitado.
Sintaxis:
<optgroup label="name">
Ejemplo 1: El siguiente ejemplo demuestra la etiqueta optgroup simple en 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>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la etiqueta optgroup con un atributo deshabilitado.
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>
Producción:
etiqueta optgroup con atributo deshabilitado