HTML Opciones


Ejemplo

Las opciones dentro de un menú de selección son las que el usuario seleccionará. La sintaxis normal para una opción es la siguiente:

<option>Some Option</option>

Sin embargo, es importante tener en cuenta que el texto dentro del elemento <option> sí no siempre se usa, y esencialmente se convierte en el valor predeterminado para los atributos que no se especifican.

Los atributos que controlan el aspecto real y la función de la opción son value y label . La etiqueta representa el texto que se mostrará en el menú desplegable (lo que está viendo y hará clic para seleccionarlo). El valor representa el texto que se enviará junto con el envío del formulario. Si se omite alguno de estos valores, en su lugar utiliza el texto dentro del elemento como el valor. Así que el ejemplo que dimos arriba podría ser "expandido" a esto:

<option label="Some Option" value="Some Option">

Tenga en cuenta la omisión del texto interno y la etiqueta final, que no se requieren para construir una opción dentro del menú. Si se incluyeran, el texto interno se ignoraría porque ambos atributos ya están especificados y el texto no es necesario. Sin embargo, probablemente no verá a mucha gente escribirlos de esta manera. La forma más común en que se escribe es con un valor que se enviará al servidor, junto con el texto interno que eventualmente se convierte en el atributo de la etiqueta, de esta manera:

<option value="option1">Some Option</option>

Seleccionando una opción por defecto

También puede especificar una determinada opción para ser seleccionada en el menú por defecto adjuntando el atributo selected . De forma predeterminada, si no se especifica ninguna opción como seleccionada en el menú, la primera opción en el menú se seleccionará cuando se renderice. Si más de una opción tiene el atributo selected adjunto, entonces la última opción presente en el menú con el atributo será la seleccionada de forma predeterminada.

<option value="option1" selected>Some option</option>

Si está utilizando el atributo en un menú de selección de múltiples opciones, entonces todas las opciones con el atributo se seleccionarán de forma predeterminada, y ninguna se seleccionará si ninguna opción tiene el atributo.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>