Lista desplegable de HTML

Introducción

El elemento Select de HTML se utiliza para crear una lista desplegable que permite a los usuarios elegir una o más opciones de la lista dada. En este laboratorio, aprenderá a usar la etiqueta Select de HTML para crear una lista de elementos para que los usuarios puedan elegir.

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

Skills Graph

Creando un elemento Select

Para crear un elemento select, usamos la etiqueta Select de HTML con las etiquetas de apertura y cierre. Aquí hay un ejemplo de cómo crear un elemento select simple.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

El código anterior crea un elemento select simple con cuatro opciones: Volvo, Saab, Opel y Audi.

Agregando atributos al elemento Select

Podemos agregar atributos al elemento Select para hacerlo más interactivo para los usuarios. Aquí están algunos de los atributos importantes del elemento Select de HTML.

A: Atributo Size

El atributo size especifica cuántas opciones deben ser visibles a la vez. Aquí hay un ejemplo:

<select size="3">
  <!-- tres opciones visibles por defecto -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: Atributo Name

El atributo Name asigna un nombre al elemento select. Aquí hay un ejemplo:

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: Atributo Multiple

El atributo multiple permite a los usuarios seleccionar más de una opción a la vez. Aquí hay un ejemplo:

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Definiendo opciones

Puede agregar cualquier cantidad de opciones a un elemento select usando la etiqueta option. Aquí hay un ejemplo:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Como puede ver, hemos definido cuatro opciones y cada opción tiene un atributo value. El atributo value se puede usar para asociar cada opción con un valor único.

Usando opciones agrupadas

Puedes agrupar opciones dentro de una etiqueta <optgroup>. Esto hace que tu elemento select sea más organizado y legible. Aquí está cómo puedes usar opciones agrupadas:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Creando valores predeterminados

Puedes especificar un valor predeterminado que se mostrará cuando se cargue la página. Aquí está cómo estableces un valor predeterminado:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

En este ejemplo, la opción "Opel" se seleccionará por defecto.

Resumen

En este laboratorio, aprendiste cómo crear una lista desplegable usando la etiqueta Select de HTML, diferentes atributos que se pueden usar con la etiqueta Select, cómo definir las opciones, usar opciones agrupadas y crear valores predeterminados. Con estas habilidades, deberías poder crear elementos select más avanzados que puedan ayudar a los usuarios a interactuar fácilmente con tus sitios web.