La etiqueta HTML <option> representa una opción dentro de un elemento <select> o como parte de una lista de sugerencias en un elemento <datalist>.
La etiqueta <option> se puede usar como un hijo de un elemento <select>, <datalist> y <optgroup>.
Sintaxis
La etiqueta <option> se escribe como <option></option> con el contenido del elemento insertado entre las etiquetas de inicio y fin.
El atributo value se usa normalmente para proporcionar un valor al que se puede hacer referencia mediante cualquier script que procese el formulario.
Como esto:
<select name="City">
<option value="bangkok">Bangkok</option>
<option value="chiang-mai">Chiang Mai</option>
<option value="pattaya">Pattaya</option>
</select>
Ejemplos
Uso básico de la etiqueta
Aquí, la etiqueta <option> se usa con una etiqueta <select> para presentar una lista de opciones entre las que el usuario puede elegir.
<select name="City">
<option value="bangkok">Bangkok</option>
<option value="chiang-mai">Chiang Mai</option>
<option value="pattaya">Pattaya</option>
</select>El atributo selected
Aquí, usamos el atributo selected para asegurarnos de que una opción sea la selección predeterminada (es decir, ya está seleccionada tan pronto como se carga la página).
En este caso, especificamos que Chiang Mai es la selección predeterminada.
<select name="City">
<option value="bangkok">Bangkok</option>
<option value="chiang-mai" selected>Chiang Mai</option>
<option value="pattaya">Pattaya</option>
</select>Usando el elemento <optgroup>
Los elementos dentro de una etiqueta <option> se pueden ordenar en grupos lógicos. Puedes hacer esto usando el elemento <optgroup>.
Aquí, agrupamos una lista de ciudades por país.
<select name="City">
<optgroup label="Australia">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="brisbane">Brisbane</option>
</optgroup>
<optgroup label="New Zealand">
<option value="auckland">Auckland</option>
<option value="dunedin">Dunedin</option>
<option value="nelson">Nelson</option>
</optgroup>
<optgroup label="Thailand">
<option value="bangkok">Bangkok</option>
<option value="chiang-mai">Chiang Mai</option>
<option value="pattaya">Pattaya</option>
</optgroup>
</select>
Usando el elemento <datalist>
La etiqueta <option> se puede usar con las etiquetas <input> y <datalist> para proporcionar una lista de sugerencias para el usuario. Estas no son necesariamente todas las opciones disponibles, solo una simple lista de sugerencias.
<label>
¿Cuál es tu personaje de dibujos animados favorito?
<input name="favCharacter" list="characters" maxlength="50">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Barney Rubble">
<option value="Fred Flinstone">
<option value="Peter Griffin">
</datalist>
</label>Intenta escribir la letra “B” en el campo a continuación. Luego prueba “H”. Luego prueba, digamos, “M”.
See the Pen Option HTML y datalist by Alex (@htmldesdecero) on CodePen.
Tu navegador también puede proporcionar un medio para ver todas las opciones disponibles. Sin embargo, no hay nada que te impida ingresar una opción que no esté en la lista.
Atributos
Los atributos se pueden agregar a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
El elemento <option> acepta los siguientes atributos.Atributo Descripción disabledDesactiva el control de entrada. El botón no aceptará cambios del usuario. Tampoco puede recibir el foco y se omitirá al presionar la tecla Tab.
Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con el nombre canónico del atributo sin distinción de mayúsculas y minúsculas, sin espacios en blanco iniciales o finales (es decir, disabled o disabled="disabled").
Valores posibles:
[Cadena vacía]disabledlabelEspecifica una etiqueta que se utilizará como alternativa al contenido del elemento option. Útil si prefieres una etiqueta más corta y concisa. selectedEspecifica que esta opción estará preseleccionada cuando el usuario cargue la página por primera vez.
Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con el nombre canónico del atributo sin distinción de mayúsculas y minúsculas, sin espacios en blanco iniciales o finales (es decir, selected o selected="selected").
Valores posibles:
[Cadena vacía]selectedvalueEspecifica el valor inicial del elemento option.
Atributos globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <option>, así como con todas las demás etiquetas HTML.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para una explicación completa de estos atributos, consulte los atributos globales de HTML 5.
