HTML option
La etiqueta <option> en HTML representa una opción en una lista desplegable, ya sea en una etiqueta <select> o <optgroup>. Cada opción tiene un valor asociado que se envía al servidor cuando se selecciona la opción en el formulario.
Atributos
Los atributos más comunes de la etiqueta <option> en HTML son:
- value: Este atributo especifica el valor que se enviará al servidor cuando se selecciona la opción. Si no se especifica, el valor será igual al contenido entre las etiquetas <option>.
- label: Este atributo especifica una etiqueta para la opción, que se mostrará al usuario en lugar del valor.
- selected: Este atributo especifica que la opción estará seleccionada de manera predeterminada cuando se cargue la página. Solo se puede seleccionar una opción como predeterminada en una lista desplegable.
- disabled: Este atributo deshabilita la opción, impidiendo que el usuario seleccione la opción.
Además, también se pueden utilizar atributos universales como class, id, style y title para aplicar estilos y facilitar la referencia a la opción mediante JavaScript.
Ejemplo de uso
Un ejemplo de uso de la etiqueta <option> en HTML en un formulario.
<form>
<label for="select-animal">Seleccione su animal favorito:</label>
<select id="select-animal" name="animal">
<option value="dog" label="Perro" selected>Perro</option>
<option value="cat" label="Gato">Gato</option>
<option value="bird" label="Pájaro">Pájaro</option>
<option value="fish" label="Pez">Pez</option>
</select>
<input type="submit" value="Enviar">
</form>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se tiene un formulario con una lista desplegable para seleccionar un animal favorito. El valor seleccionado por defecto es “Perro” y el usuario podrá elegir entre “Perro”, “Gato”, “Pájaro” y “Pez”.
Al presionar el botón “Enviar” el valor seleccionado será enviado al servidor.
En este ejemplo se puede observar como el atributo “value” especifica el valor que se enviará al servidor cuando se selecciona la opción, “label” especifica una etiqueta para la opción, que se mostrará al usuario en lugar del valor, “selected” especifica que la opción estará seleccionada de manera predeterminada cuando se cargue la página.
Más ejemplos
Aquí puedes ver algunos ejemplos de la etiqueta <option> en distintos contextos:
- Ejemplo básico:
<form>
<label for="select-color">Seleccione su color favorito:</label>
<select id="select-color" name="color">
<option value="red">Rojo</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
</select>
<input type="submit" value="Enviar">
</form>
Lenguaje del código: HTML, XML (xml)- Ejemplo con opciones deshabilitadas
<form>
<label for="select-fruit">Seleccione su fruta favorita:</label>
<select id="select-fruit" name="fruit">
<option value="apple">Manzana</option>
<option value="banana">Banana</option>
<option value="orange" disabled>Naranja</option>
<option value="strawberry">Fresa</option>
</select>
<input type="submit" value="Enviar">
</form>
Lenguaje del código: HTML, XML (xml)- Ejemplo con una opción seleccionada de manera predeterminada
<form>
<label for="select-city">Seleccione su ciudad favorita:</label>
<select id="select-city" name="city">
<option value="nyc">Nueva York</option>
<option value="sf">San Francisco</option>
<option value="chicago" selected>Chicago</option>
<option value="la">Los Ángeles</option>
</select>
<input type="submit" value="Enviar">
</form>
Lenguaje del código: HTML, XML (xml)- Ejemplo con una etiqueta personalizada para cada opción
<form>
<label for="select-language">Seleccione su idioma preferido:</label>
<select id="select-language" name="language">
<option value="en" label="Inglés">English</option>
<option value="es" label="Español">Español</option>
<option value="fr" label="Francés">Français</option>
</select>
<input type="submit" value="Enviar">
</form>
Lenguaje del código: HTML, XML (xml)Espero que estos ejemplos te ayuden a entender mejor como utilizar la etiqueta <option> en HTML.