HTML select

La etiqueta <select> de HTML es utilizada para crear un menú desplegable, también conocido como “lista desplegable” o “menú desplegable”. Este elemento permite al usuario elegir una opción de un conjunto de opciones predefinidas.

La etiqueta <select> se utiliza junto con la etiqueta <option> para especificar las opciones disponibles en el menú desplegable.

Cada etiqueta <option> representa una opción individual en el menú desplegable y su contenido es el texto que se mostrará en la lista.

Ejemplo de uso

En este ejemplo se crea un menú desplegable con tres opciones “Opción 1”, “Opción 2” y “Opción 3”, cada una con un valor “option1”, “option2” y “option3” respectivamente.

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

Lenguaje del código: HTML, XML (xml)

Atributos

La etiqueta <select> en HTML5 tiene varios atributos importantes, algunos de los cuales son:

• autofocus: Este atributo especifica que el control de selección debe tener el foco automáticamente cuando se carga la página.

• disabled: Este atributo deshabilita el control de selección para que el usuario no pueda interactuar con él.

• form: Este atributo especifica el formulario al que pertenece el control de selección.

• multiple: Este atributo permite seleccionar varias opciones al mismo tiempo.

• name: Este atributo especifica el nombre del control de selección, que se utiliza para enviar los datos del formulario.

• required: Este atributo especifica que el usuario debe seleccionar una opción antes de enviar el formulario.

• size: Este atributo especifica el número de opciones que se deben mostrar en el control de selección.

Más ejemplos

Aquí tienes algunos ejemplos de cómo utilizar la etiqueta <select> en HTML5, con algunos de sus atributos:

<!-- Ejemplo básico de un desplegable -->
<label for="color">Selecciona tu color favorito:</label>
<select id="color" name="color">
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="azul">Azul</option>
</select>

<!-- Ejemplo con opción seleccionada por defecto -->
<label for="tamaño">Selecciona tu tamaño de camiseta:</label>
<select id="tamaño" name="tamaño">
  <option value="s">S</option>
  <option value="m" selected>M</option>
  <option value="l">L</option>
  <option value="xl">XL</option>
</select>

<!-- Ejemplo con atributo multiple -->
<label for="frutas">Selecciona tus frutas favoritas:</label>
<select id="frutas" name="frutas" multiple>
  <option value="pera">Pera</option>
  <option value="manzana">Manzana</option>
  <option value="platano">Plátano</option>
  <option value="naranja">Naranja</option>
</select>

Lenguaje del código: HTML, XML (xml)

Otro ejemplo:

<form>
  <label for="car-select">Elige tu automóvil favorito:</label>
  <select id="car-select" name="car" size="3" multiple>
    <optgroup label="Fabricante europeo">
      <option value="bmw">BMW</option>
      <option value="audi">Audi</option>
      <option value="mercedes">Mercedes-Benz</option>
    </optgroup>
    <optgroup label="Fabricante japonés">
      <option value="toyota">Toyota</option>
      <option value="honda">Honda</option>
      <option value="nissan">Nissan</option>
    </optgroup>
  </select>
  <input type="submit" value="Enviar">
</form>

Lenguaje del código: HTML, XML (xml)

El atributo id es utilizado para vincular el elemento <select> con una etiqueta <label> utilizando el atributo for. El atributo name es utilizado para identificar el campo select en el procesamiento del formulario. El atributo size define el número de opciones que se mostrarán en la lista desplegable.

El atributo multiple permite seleccionar varias opciones. La etiqueta <optgroup> se utiliza para agrupar opciones relacionadas en una lista desplegable. El atributo label especifica el nombre del grupo. La etiqueta <option> define las opciones disponibles en la lista desplegable. El atributo value es utilizado para especificar el valor a ser enviado al servidor.

Es importante notar que el elemento <select> debe estar dentro de un <form> para ser procesado correctamente.