Etiqueta HTML <option>
La etiqueta <option> define elementos en una lista desplegable, definida por la etiqueta <select>, o los elementos de la lista de datos para autocompletar, definida por la etiqueta <datalist>. La etiqueta <option> puede usarse como elemento hijo de la etiqueta <select>, <datalist> o <optgroup>, que agrupa los elementos de la lista.
Envuelve la etiqueta <select> en un elemento <form> solo si necesitas enviar los datos seleccionados a un servidor o acceder a ellos mediante scripts.
Sintaxis
La etiqueta <option> puede escribirse como una etiqueta de apertura y cierre 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>).
éxito
La etiqueta
<option>generalmente se usa con el atributovaluepara especificar qué valor debe enviarse al servidor para su posterior procesamiento.
Ejemplo de la etiqueta HTML <option>:
Una lista desplegable con una 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>Resultado
Computer Notebook Tablet ---
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 autocompletado.
Resultado
---
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 eventos.
Ejemplo con los atributos selected y disabled:
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>Práctica
¿Cuáles son las características y usos de la etiqueta HTML <option>?