Elemento option
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento option
representa una opción en un control select
o una sugerencia en un elemento datalist
. El comportamiento de este elemento varía levemente de acuerdo a si se encuentra en uno u otro de estos dos elementos. En contraste con datalist
, un control select
puede tener sus opciones agrupadas (mediante un elemento optgroup
) y ser representado in situ.
En algunos casos particulares, este elemento puede representar una opción-etiqueta predeterminada, que no es más que una opción destinada a actuar como etiqueta cuando no se haya elegido ningun valor en el control select
al que pertenece. En tales casos, esta opción debe ser la primera en el control, su atributo value
debe estar vacío y no debe pertenecer a ningún grupo de opciones (optgroup
). La opción-etiqueta predeterminada es obigatoria cuando el elemento select
al que pertenece es declarado con el atributo required
y se muestra en modo de lista desplegable.
Ejemplos
Nuestro primer ejemplo mostrará un control select
con un número determinado de opciones, una de ellas seleccionada. Nota como definiremos apropiadamente el atributo selected
solo en una opción del control, y observa como ésta opción estará seleccionada por defecto cuando el documento se cargue o el formulario sea reestablecido.
<form action="../../form-result.php" target="_blank">
<p>
Pick a car:
<select name="car">
<option>458 Spider</option>
<option selected>F12 Berlinetta</option>
<option>California T</option>
</select>
<input type="submit" value="Submit form">
<input type="reset" value="Reset form">
</p>
</form>
En nuestro segundo ejemplo usaremos el elemento optgroup
para agrupar las opciones temáticamente. Esta es una muy buena práctica que mejora la legibilidad y la facilidad de uso en los controles select
.
<p>
Elije una estatuilla:
<select>
<optgroup label="Aves">
<option>Búho</option>
<option>Petirrojo</option>
<option>Paloma</option>
<option>Gorrión</option>
</optgroup>
<optgroup label="Felinos">
<option>León</option>
<option>Tigre</option>
<option>Gato</option>
</optgroup>
</select>
</p>
Elije una estatuilla:
Ahora crearemos un control select
con una opción-etiqueta predeterminada. Para llevar a cabo esta tarea, declararemos una primera opción (option
) en el elemento, que esté fuera de cualquier grupo de opciones (optgroup
) y que tenga una cadena vacía en el atributo value
.
<form action="../../form-result.php" target="_blank">
<p>
Tu bebida:
<select name="bebida" required>
<option value="">Elije tu bebida</option>
<optgroup label="Con Vodka">
<option>Martini</option>
<option>Cosmopolita</option>
<option>Destornillador</option>
</optgroup>
<optgroup label="Con Tequila">
<option>Margarita</option>
<option>Tequila Sunrise</option>
<option>Cantarito</option>
</optgroup>
</select>
<input type="submit" value="Enviar">
</p>
</form>
Y finalmente, intentaremos colocar nuestras opciones en un datalist
. Este elemento ha sido agregado a HTML5 con el fin de proveer valores predefinidos para ayudar a los usuarios a completar los campos de los formularios. Esto significa que los navegadores que soporten el mecanismo mostrarán las opciones provistas por el elemento datalist
durante el proceso de rellenado del control asociado.
<p>
Elije un motor de búsqueda:
<input type="text" list="listamotoresbusqueda">
</p>
<datalist id="listamotoresbusqueda">
<option>Google</option>
<option>Yahoo!</option>
<option>Bing</option>
<option>DuckDuckGo</option>
</datalist>
Elije un motor de búsqueda:
Atributos
Atributos específicos
disabled
Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.
Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.
Cuando un elemento option
pertenece a un optgroup
deshabilitado, la opción es deshabilitada al igual que su padre.
Ejemplo
<p>
Selecciona un producto:
<select>
<option>Manzana</option>
<option>Naranja</option>
<option disabled>Banana</option>
<option>Durazno</option>
</select>
</p>
Selecciona un producto:
label
Una línea de texto pensada para etiquetar la opción. Esta etiqueta será mostrada como texto de la opción y será reemplazada por el contenido del elemento cuando esté ausente.
El soporte provisto por los navegadores para el atributo label
es incompleto. Los autores pueden mejorar la compatibilidad omitiendo este atributo y reemplazándolo con el contenido del elemento.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Elije un postre:
<select name="postre">
<option label="Tarta de limón" value="tartalimon"></option>
<option label="Tarta de queso" value="tartaqueso"></option>
<option label="Cottage pudding" value="cottagepudding"></option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
selected
Un valor booleano que indica si la opción debería estar seleccionada cuando el documento es cargado y cuando el formulario es restaurado. Si el atributo toma el valor "selected" o la cadena vacía (""), o si está simplemente presente, el elemento será la opción predeterminada.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Tamaño de la hamburguesa:
<select name="tamano">
<option>Regular</option>
<option>Doble</option>
<option selected>Gigante!</option>
</select>
<input type="submit" value="Enviar formulario">
<input type="reset" value="Restaurar formulario">
</p>
</form>
value
Una línea de texto para ser enviada al agente procesador cuando el formulario es enviado. En los controles select
, el par nombre-valor se compone por el atributo name
del elemento select
y el atributo value
de la opción seleccionada.
Cuando el atributo value
está ausente, el contenido del elemento toma su lugar en el envío del formulario.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Ancho:
<select name="ancho">
<option>Pequeño</option>
<option>Ancho</option>
<option value="ultra-wide">Extra ancho</option>
</select>
<input type="submit" value="Enviar formulario">
</p>
</form>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.