Cómo seccionar una lista de opciones

html select option input

Cuando utilizamos listas desplegables con <select> podemos usar la etiqueta <optgroup> para seccionar la lista mostrada.

En este ejemplo creamos una lista de diversas mascotas, seccionadas por razas:

<select>
<option>Selecciona una opción</option>
<optgroup label="Perros">
<option value="labrador-retriever">Labrador Retriever</option>
<option value="golden-retriever">Golden Retriever</option>
<option value="chihuahua">Chihuahua</option>
</optgroup>
<optgroup label="Gatos">
<option value="siames">Siamés</option>
<option value="persa">Persa</option>
<option value="british-shorthair">British Shorthair</option>
</optgroup>
<optgroup label="Peces">
<option value="goldfish">Goldfish</option>
<option value="betta">Betta</option>
<option value="guppy">Guppy</option>
</optgroup>
</select>
Visualización
INFO

Recordemos que es importante colocar el atributo value para conseguir un valor real al momento de manipular con JavaScript.

Comentarios

Rutas relacionadas

Web Dev (Frontend)

Anterior
html

Entidades HTML

2 mins
Siguiente
css

Formas de centrar contenido

3 mins