Etiqueta HTML <select>

Definición y uso

<select> El elemento se utiliza para crear una lista desplegable.

<select> El elemento se utiliza comúnmente en formularios para recopilar la entrada del usuario.

Después de enviar el formulario, se necesita la propiedad name para referirse a los datos del formulario (si se omite la propiedad name, los datos de la lista desplegable no se enviarán).

<select> Dentro del elemento Etiqueta <option> Define las opciones disponibles en la lista desplegable.

Se necesita usar la propiedad id para asociar la lista desplegable con la etiqueta (label).

Consejo:Siempre añade Etiqueta <label> ¡Para obtener las mejores prácticas de accesibilidad!

Por favor, consulta:

Manual de referencia del DOM HTML:Objeto Select

Tutorial de CSS:Configurar el estilo del formulario

Ejemplo

Ejemplo 1

Crear una lista desplegable con cuatro opciones:

<label for="cars">Por favor, selecciona una marca de automóviles:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Prueba por ti mismo

Ejemplo 1

Ejemplo 2 <select> Se usa junto con la etiqueta <optgroup>:

<label for="cars">Por favor, selecciona una marca de automóviles:</label>
<select name="cars" id="cars">
  <optgroup label="Coches chinos">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Coches alemanes">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Prueba por ti mismo

Atributo

Atributo Valor Descripción
autofocus autofocus La lista desplegable debe obtener el enfoque automáticamente al cargar la página.
disabled disabled Se debe deshabilitar la lista desplegable.
form id del formulario Define el formulario al que pertenece la lista desplegable.
multiple multiple Se puede seleccionar múltiples opciones a la vez.
name Nombre Define el nombre de la lista desplegable.
required required Especifica que el usuario debe seleccionar un valor antes de enviar el formulario.
size Número Define la cantidad de opciones visibles en la lista desplegable.

Atributos globales

<select> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<select> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

Ninguno.

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte