Etiqueta SELECT

La etiqueta <select> (del inglés select – seleccionar) re permite crear un elemento de interfaz en forma de lista desplegable, así como una lista con una o varias selecciones.

La apariencia final depende del uso del atributo size, que establece la altura de la lista. El ancho de la lista está determinado por el texto más ancho especificado en el elemento <option> y también se puede cambiar usando estilos. Cada elemento se crea con un elemento <option>, que debe estar anidado dentro de un contenedor <select>. Si planeas enviar datos de la lista al servidor, debes colocar <select> dentro del formulario. Esto también es necesario cuando se accede a los datos de la lista a través de scripts.

Elige un héroeAquiles JasonPerseoPrometeo

Sintaxis de Etiqueta <Select>

<select>
  <option>Elemento 1</option>
  <option>Elemento 2</option>
</select>

La etiqueta de cierre es obligatoria.

Atributos de Etiqueta <Select>

• autofocus: Establece que la lista reciba el foco cuando se carga la página.
• disabled: Bloquea el acceso y la modificación del elemento.
• form: Vincula la lista a un formulario.
• multiple: Permite seleccionar varios elementos de la lista a la vez.
• name: Nombre del elemento que se enviará al servidor o al que se accederá mediante scripts.
• required: Se requiere seleccionar la lista antes de enviarla.
• size: El número de líneas a mostrar en la lista.

Los atributos universales también están disponibles para este elemento.

autofocus

El atributo autofocus configura la lista para que reciba el foco cuando se carga la página, haciendo que la lista esté disponible para seleccionar elementos, por ejemplo, utilizando el teclado.

La sintaxis es:

<select autofocus>
  ...
</select>

• Valores: Ninguno
• Valor por defecto: Por defecto, este atributo está desactivado.

disabled

Bloquea el acceso a los elementos de la lista y su modificación. No se puede acceder a una lista bloqueada ni modificarla mediante el cursor o el teclado, ni se envía su valor a un servidor.

Sintaxis:

<select disabled>
  ...
</select>

• Valores: Ninguno
• Valor por defecto: Por defecto, este atributo está desactivado.

form

Asocia una lista a un formulario por su identificador. Esto es necesario cuando la lista está fuera de <form>.

Sintaxis:

<select form="<identificador>">
  ...
</select>

• Valores: Identificador del formulario (valor del atributo id del elemento
  <form>).
• Valor por defecto: Por defecto, este atributo está desactivado.

multiple

La presencia del atributo múltiple le dice al navegador que represente el contenido del elemento <select> como una lista de selección múltiple. La apariencia final de la lista depende del atributo size utilizado y del navegador.

Para seleccionar múltiples valores de lista, usa las teclas Ctrl y Shift junto con el cursor del mouse.

Para enviar una matriz de datos al servidor, el valor del atributo name debe escribirse entre corchetes, hero[], por ejemplo.

Sintaxis:

<select multiple>
  ...
</select>

• Valores: Ninguno
• Valor por defecto: Por defecto, este atributo está desactivado.

name

Especifica un nombre exclusivo para el elemento <select>. Normalmente, este nombre se usa para acceder a datos a través de scripts o para recuperar el valor de lista seleccionado en el servidor.

Sintaxis:

<select name="<nombre>">
  ...
</select>

• Valores: El nombre es un conjunto de caracteres, incluidos números y letras. JavaScript distingue entre mayúsculas y minúsculas, por lo que cuando se refiera al elemento <select> por su nombre, usa la misma ortografía que el atributo <name>.
• Valor por defecto: Por defecto, este atributo está desactivado.

required

Establece la lista que debe seleccionarse antes de enviar el formulario al servidor. Si el elemento de la lista no está seleccionado, el navegador mostrará un mensaje y no se enviará el formulario. El tipo y contenido del mensaje depende del navegador y no puede ser modificado por el usuario.

Sintaxis:

<select required>
  ...
</select>

• Valores: Ninguno
• Valor por defecto: Por defecto, este atributo está desactivado.

size

Establece la altura de la lista. Si el valor del atributo size es 1, la lista se convierte en una lista desplegable. Agregar el atributo multiple a un elemento con size="1" representa la lista como un control giratorio. En todos los demás casos, se obtiene una lista de opción única o múltiple.

Sintaxis:

<select size="<número>">
  ...
</select>

• Valores: Cualquier número entero positivo.
• Valor por defecto: Depende del atributo multiple. Si está presente, el tamaño de la lista es igual al número de elementos. Si el atributo multiple no está presente, el valor por defecto del atributo size es 1.

Valores de Rol ARIA

<select> (sin atributo multiple y sin atributo de size mayor que 1) – role=combobox
<select> (con un atributo multiple o con un atributo de size mayor que 1) – role=listbox

Descripción y Ejemplos

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SELECCIONAR</title>
  </head>
  <body>
    <form action="select1.php" method="post">
      <p>
        <select size="3" multiple name="hero[]">
          <option disabled>Elige un héroe</option>
          <option value="Aquiles">Aquiles</option>
          <option selected value="Jason">
            Jason
          </option>
          <option value="Perseo">Perseo</option>
          <option value="Prometeo">Prometeo</option>
        </select>
      </p>
      <p><input type="submit" value="Enviar" /></p>
    </form>
  </body>
</html>

Otro ejemplo con la etiqueta SELECT y sus atributos:

See the Pen Etiqueta SELECT HTML by Alex (@htmldesdecero) on CodePen.

Cómo Utilizar HTML Select en un Formulario

El elemento select está pensado para ser utilizado dentro de un elemento de formulario HTML, que permite a los usuarios introducir y enviar respuestas en el front-end de su sitio. Las etiquetas select anidadas dentro de la etiqueta form se incluyen en el formulario, y las respuestas se envían cuando el usuario pulsa el botón de envío. Este es el aspecto de un formulario HTML con un elemento submit:

<form id="form">
  <label for="shirt-colors">¿De qué color quieres la camisa?</label><br>
  <select name="shirts" id="shirt-colors">
    <option value="red">Camisa Roja</option>
    <option value="blue">Camisa Azul</option>
    <option value="green">Camisa Verde</option>
  </select>
  
  <div><button type="submit">Enviar</button></div>
</form>

Combinado con un estilo CSS:

form {
  background-color: #e5f5f8;
  border-radius: 10px;
  font-family: Avenir;
  padding: 20px;
  width: 200px;
}
#form-prompt {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 5px;
}
button { margin-top: 10px; }
button:hover, input:hover, label:hover { cursor: pointer; }

También puedes colocar un elemento <select> fuera de una etiqueta
y asociarlo a ese formulario mediante el atributo form, de esta forma:

<label for="shirt-colors">¿De qué color quieres la camisa?</label><br>
<select name="shirts" id="shirt-colors" form="form">
    <option value="red">Camisa Roja</option>
    <option value="blue">Camisa Azul</option>
    <option value="green">Camisa Verde</option>
</select>
<form id="form">
  <div><button type="submit">Enviar</button></div>
</form>

El CSS:

select { margin-bottom: 10px; }
form {
  background-color: #e5f5f8;
  border-radius: 10px;
  font-family: Avenir;
  padding: 20px;
  width: 200px;
}
#form-prompt {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 5px;
}
button { margin-top: 10px; }
button:hover, input:hover, label:hover { cursor: pointer; }

HTML Select: Una Solución Sencilla para los Desplegables

Cuando quieras presentar opciones como un menú desplegable, utiliza select – maneja toda la funcionalidad necesaria por ti, y puedes personalizarlas con atributos simples. Este elemento también ahorra espacio en los formularios, por lo que es ideal para listas largas (por ejemplo, “¿En qué lenguaje(s) programas?“). Lo mejor de todo es que es fácil de usar, por lo que puede empezar a recopilar respuestas en cuestión de minutos.