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.

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.

Cuando es utilizada en un elemento select, solo una opción en el control puede tener su atributo selected declarado.

La agrupación de opciones en un control select puede mejorar la legibilidad y la facilidad de uso. Los autores deberían usar el elemento optgroup siempre que sea posible.

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>

Pick a car:

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.

Cuando un elemento select es mostrado en modo de lista desplegable y tiene al atributo required declarado, la presencia de la opción-etiqueta predeterminada es obligatoria. En tales casos, los navegadores que soportan el mecanismo prevendrán el envío del formulario hasta que una opción distinta a la opción-etiqueta predeterminada haya sido seleccionada.

<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>

Tu bebida:

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.

Para asociar un control a un datalist, el valor del atributo list del control debe coincidir con el valor del atributo id del datalist.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas a fin de proveer esta funcionalidad consistentemente.

<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>

Elije un postre:

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>

Tamaño de la hamburguesa:

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>

Ancho:

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.