¿Como funciona el comando en HTML5: 'Option'?

Instrucción HTML5: <option>

El elemento <option> en HTML5 se usa dentro de un <select>, <datalist> o un <optgroup> para definir una opción en una lista desplegable o un conjunto de opciones. Vamos a detallar todos sus atributos uno por uno:

1. disabled: Este atributo booleano indica que la opción está deshabilitada y no puede ser seleccionada.

   • Ejemplo: <option disabled>Opciones no disponibles</option>

2. label: Proporciona una etiqueta adicional para la opción. Este valor no se muestra al usuario, pero puede servir para propósitos de accesibilidad o scripts.

   • Ejemplo: <option label="Fruta" value="manzana">Manzana</option>

3. selected: Atributo booleano que especifica que la opción debe ser la predeterminada seleccionada cuando se carga el formulario por primera vez.

   • Ejemplo: <option selected value="naranja">Naranja</option>

4. value: Especifica el valor que será enviado al servidor si se selecciona esta opción. Si se omite, el valor que se envía es el contenido textual del elemento <option>.

   • Ejemplo: <option value="pera">Pera</option>

Uso de <option> en HTML5 con Ejemplos

Ejemplo 1: Lista de selección básica

Un ejemplo típico de utilización del elemento <option> dentro de un <select> es una lista de selección básica de frutas.

<label for="frutas">Escoge una fruta:</label>
<select id="frutas" name="frutas">
  <option value="manzana">Manzana</option>
  <option value="pera">Pera</option>
  <option value="naranja">Naranja</option>
  <option value="mango">Mango</option>
</select>

En este ejemplo, se crea una lista desplegable donde el usuario puede seleccionar su fruta preferida. Los valores que serán enviados al servidor son "manzana", "pera", "naranja" y "mango".

Ejemplo 2: Opción seleccionada por defecto

Aquí mostramos cómo hacer que una opción esté seleccionada por defecto y cómo deshabilitar una opción.

<label for="bebidas">Escoge una bebida:</label>
<select id="bebidas" name="bebidas">
  <option value="agua">Agua</option>
  <option value="jugo" selected>Jugo</option>
  <option value="gaseosa">Gaseosa</option>
  <option value="cerveza" disabled>Cerveza</option>
</select>

• La opción "Jugo" está seleccionada por defecto gracias al atributo selected.
• La opción "Cerveza" está deshabilitada mediante el atributo disabled, lo cual impide que sea seleccionada.

Ejemplo 3: Uso de <option> dentro de un <datalist>

El siguiente ejemplo muestra cómo usar <option> con un elemento <datalist> para proporcionar sugerencias en un campo de entrada.

<label for="usuario">Nombre de usuario:</label>
<input list="usuarios" id="usuario" name="usuario">
<datalist id="usuarios">
  <option value="jdoe">
  <option value="asmith">
  <option value="bjones">
</datalist>

Aquí, cuando el usuario comienza a escribir en el campo de entrada, se le presentan opciones de autocompletar basadas en la lista dada en el <datalist>.

Estos ejemplos cubren situaciones básicas, pero bastante comunes, en las que se utiliza el elemento <option>. Ajustando los atributos según las necesidades, se puede lograr un comportamiento más específico y personalizado para las listas desplegables en los formularios HTML.