Opciones de la lista de selección HTML

Introducción

La etiqueta HTML <option> se utiliza para definir las opciones en una lista desplegable en un formulario HTML. Se adjunta a la etiqueta <select> y a sus variantes como <datalist> y <optgroup>. Esta etiqueta ayuda a los usuarios a hacer una selección de una lista de opciones. Esta práctica te guiará a través de los pasos para implementar una lista desplegable HTML utilizando la etiqueta <option>.

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.

Crea un elemento

Crea un archivo HTML llamado index.html en tu editor de texto preferido.

Comienza creando un formulario HTML básico:

<form></form>

Crea un elemento y agrega opciones

Dentro del elemento <form>, agrega un elemento <select>, que creará una lista desplegable.

<form>
  <select>
    <option value="option1">Opción 1</option>
    <option value="option2">Opción 2</option>
    <option value="option3">Opción 3</option>
  </select>
</form>

Aquí, hemos agregado tres etiquetas <option> dentro de las etiquetas <select> con el atributo value establecido en "option1", "option2" y "option3".

Agrega una sugerencia

Agreguemos un texto de sugerencia. Dentro de la etiqueta <select>, agrega el siguiente código:

<select>
  <option value="" disabled selected>Selecciona una opción</option>
  <option value="option1">Opción 1</option>
  <option value="option2">Opción 2</option>
  <option value="option3">Opción 3</option>
</select>

Aquí, hemos agregado una nueva etiqueta <option> con los siguientes atributos:

value="" que establece el valor como una cadena vacía.
disabled que deshabilita la opción para que no se pueda seleccionar.
selected que se utiliza para indicar la opción predeterminada de la lista desplegable.
El texto dentro de la etiqueta <option> que actúa como una sugerencia.

Agrega un botón de envío

Necesitamos un botón de envío para enviar el formulario. Agrega el siguiente código después de la etiqueta <select>:

<form>
  <select>
    <option value="" disabled selected>Selecciona una opción</option>
    <option value="option1">Opción 1</option>
    <option value="option2">Opción 2</option>
    <option value="option3">Opción 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Enviar" />
</form>

Guarda el archivo y ejecútalo en un navegador web para ver la lista desplegable en acción.

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta HTML <option> para crear una lista desplegable. Comenzamos creando un formulario HTML, luego agregamos un elemento <select>, agregamos opciones dentro de él con el atributo value y agregamos un texto de sugerencia. Finalmente, agregamos un botón de envío para enviar el formulario. La etiqueta <option> juega un papel crucial en la creación de formularios HTML dinámicos.