Etiqueta HTML <option>
La etiqueta <option> define elementos en una lista desplegable. Descripción, atributos y ejemplos de uso.
La etiqueta <option> define un elemento individual dentro de una lista desplegable creada con la etiqueta <select>, o una sugerencia de autocompletar dentro de un <datalist>. Puede aparecer como hijo de <select>, <datalist>, o un <optgroup>, que agrupa opciones relacionadas.
Cada <option> tiene dos datos distintos: el texto que ve el usuario y el valor que se envía al servidor. Entender la diferencia entre ambos es clave para usar esta etiqueta correctamente, y se explica en detalle a continuación.
Sintaxis
La etiqueta <option> puede escribirse como un par de etiquetas o como una etiqueta de cierre automático. Cuando se usa como par, el texto de visualización se escribe entre las etiquetas de apertura (<option>) y cierre (</option>).
La etiqueta <option> generalmente se usa con el atributo value para especificar qué valor debe enviarse al servidor para su procesamiento posterior.
Ejemplo de la etiqueta HTML <option>:
Una lista desplegable con la etiqueta HTML <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>El <select> está envuelto en un <form> aquí porque el desplegable está destinado a enviarse a un servidor. Un <select> funciona perfectamente sin un formulario para scripts del lado del cliente, pero se necesita un formulario (o JavaScript) para enviar realmente el valor seleccionado a algún destino.
El atributo value y su particularidad
El atributo value contiene los datos que se envían cuando se selecciona esa opción. El texto entre las etiquetas es solo lo que ve el usuario: no tiene que coincidir con el valor.
Si se omite value, el navegador envía el contenido de texto de la opción en su lugar. Estas dos opciones se comportan de manera idéntica al enviarse:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>Esto es conveniente, pero también es una fuente común de errores: si más adelante se cambia el texto visible (por traducción, capitalización o redacción) de una opción que no tiene value, los datos que recibe el servidor también cambian. Para envíos predecibles y estables, siempre establezca un value explícito.
Ejemplo de la etiqueta HTML <option> con la etiqueta <datalist>.
Lista de aeropuertos de salida con la etiqueta option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>En este ejemplo, las etiquetas <option> se colocan dentro de la etiqueta <datalist> sin el atributo value, ya que el contenido de texto sirve como sugerencia de autocompletar.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| disabled | disabled | Indica que la selección del elemento está deshabilitada. |
| label | text | Define un nombre para un elemento de la lista. |
| selected | selected | Establece que la opción debe estar seleccionada por defecto cuando se carga la página. |
| value | text | Define el valor que se envía al servidor. |
La etiqueta <option> admite los atributos globales y los atributos de evento.
Los atributos selected y disabled
selected marca la opción que está preseleccionada cuando se carga la página. disabled hace que una opción sea visible pero no seleccionable (aparece en gris). En este ejemplo Blue está seleccionada por defecto y Green no puede elegirse:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Una opción de marcador de posición
Un <select> siempre muestra su primera opción por defecto, por lo que no existe un "marcador de posición" integrado como en un campo de texto. El patrón habitual es añadir una primera opción que esté vacía, disabled y selected. Solicita al usuario que haga una elección, no puede enviarse como un valor real y no puede volver a seleccionarse una vez que el usuario elige otra opción:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>El atributo required pertenece al elemento <select>, no a <option>. Dado que el marcador de posición anterior tiene un value vacío, el formulario no puede enviarse hasta que el usuario elija una opción real.
Deshabilitar un grupo completo
El atributo disabled también funciona en un <optgroup>, lo que deshabilita todas las opciones dentro de él de una vez — útil para mostrar categorías que están temporalmente no disponibles:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>El atributo label
El atributo label proporciona un título alternativo para la opción. Cuando se establece label, los navegadores lo muestran en lugar del contenido de texto. Si se omite label, el texto entre las etiquetas se usa como etiqueta — por eso normalmente se omite y el texto visible se escribe directamente.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>En la práctica, rara vez es necesario usar label en un <option> simple; es más significativo en un <optgroup>, donde label nombra el encabezado del grupo.