Etiqueta select
La etiqueta select crea una lista desplegable
para usar en formularios HTML.
Un elemento individual de la lista debe almacenarse en
la etiqueta option.
Atributos
| Atributo | Descripción |
|---|---|
multiple |
La presencia de este atributo crea un multiselect -
una lista desplegable en la que se pueden seleccionar varios elementos manteniendo presionada
la tecla Ctrl o seleccionándolos con el ratón.
Atributo opcional. |
name |
El nombre de la lista desplegable. Necesario para obtener los datos del campo en PHP. Para el correcto funcionamiento del formulario, los nombres de los campos no deben coincidir entre sí (en un mismo formulario). Si coinciden, en PHP llegarán los datos del campo de entrada que esté más abajo en el código HTML. |
Ejemplo
Veamos cómo funciona una lista desplegable:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Ejemplo
Hagamos que el ancho de la lista desplegable sea
igual al ancho del elemento más grande (si
no se especifica explícitamente mediante la propiedad CSS
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Ejemplo . Selección por defecto
Ahora intentemos seleccionar una ciudad
por defecto. Hagámoslo usando el atributo
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Ejemplo . Multiselect
Ahora transformemos un select normal en
un multiselect usando el atributo multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Preste atención a que el nombre del select, especificado en el atributo name,
debe llevar corchetes al final. Esto es necesario para que en PHP
lleguen todos los valores seleccionados (de lo contrario, solo llegará uno - el último).
Ejemplo . Varios valores por defecto en multiselect
Ahora, en el multiselect por defecto, intentemos seleccionar más de un valor:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
: