Agrupación de Opciones en HTML: Mejora la Funcionalidad de la Lista Desplegable

Introducción

La etiqueta <optgroup> en HTML se utiliza para crear un grupo de opciones dentro de una lista desplegable. Esta práctica te guiará a través de los pasos para crear un optgroup y personalizarlo utilizando atributos.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/head_elems -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/forms -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/form_group -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/form_access -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/inter_elems -.-> lab-70808{{"Agrupación de Opciones en HTML"}} html/custom_attr -.-> lab-70808{{"Agrupación de Opciones en HTML"}} end

Configura el archivo HTML

Crea un nuevo archivo llamado index.html. Agrega la estructura básica de HTML e incluye una etiqueta <select> dentro del elemento body.

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup Tag Lab</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

Agrega opciones a la lista desplegable

Agrega etiquetas <option> dentro de la etiqueta <select> para crear tu lista de opciones. Utiliza el atributo value para establecer el valor de cada opción.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Crea un optgroup

Utiliza la etiqueta <optgroup> para agrupar ciertas opciones. Agrega el atributo label para definir el nombre del grupo.

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Deshabilita un optgroup

Utiliza el atributo disabled para deshabilitar un grupo completo de opciones dentro de la lista desplegable. Agrega este atributo a la etiqueta de apertura <optgroup>.

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Resumen

La etiqueta <optgroup> se utiliza para crear un grupo de opciones dentro de una lista desplegable. Puedes personalizarla utilizando atributos como disabled y label. Siguiendo los pasos de esta práctica, puedes agrupar y organizar efectivamente tus opciones en HTML.