En ocasiones resulta mucho mejor para el usuario y para nosotros, que el usuario elija entre una serie de opciones que le proponemos. Por ejemplo, entre una serie de países, una actividad profesional, etc. Todo esto se puede llevar a cabo con el HTML, veamos a continuación algunas maneras de hacerlo:
1º Lista de opciones
Estas son del tipo de menús desplegables que permiten elegir entre uno o varias de las opciones que nos proponen. Para su creación en HTML emplearemos la etiqueta <select> y </select>. Como vimos en otras etiquetas determinaremos su nombre con el atributo name. Y para cada opción de esta lista ser precedida de la etiqueta <option> y su correspondiente cierre. Veámoslo con un ejemplo:
<select name=”Países de Europa”>
<option>España</option>
<option>Francia</option>
<option>Alemania</option>
<option>Reino Unido</option>
</select>
El resultado que aparecería en el navegador es:
Esta etiqueta tiene varios atributos que modifican la lista de opciones, entre ellos:
El atributo size que indica el número de opciones mostrado en la lista. Para ver el resto tenemos que desplazar la barra lateral.
El atributo multiple que nos deja seleccionar varios elementos de la lista. Para ello debemos utilizar la tecla ctrl. o shift. Este atributo no toma ningún valor sino que nos indica que podemos elegir varias opciones dentro de la lista.
Veamos ahora cual sería el efecto de estos dos atributos sobre la lista de opciones, primero veremos el código y luego su efecto en el navegador:
<select name=”Países de Europa” size=” 2” multiple>
Lo veríamos así:
La etiqueta <option> también tiene algunos atributos:
El atributo selected no toma ningún valor sino que simplemente indica la opción que esta elegida por defecto. Por ejemplo si escribimos el siguiente código:
<option selected>España</option>
Siempre aparecerá elegida España, a no ser que nosotros pinchemos en la lista desplegable y elijamos otra de las opciones.
El atributo value nos determina el valor de la opción que nos enviarán al programa o correo electrónico si el usuario elige esta opción. El código que utilizaríamos sería:
<option value=”1”>España</option>
Así, si el usuario elige España en la lista de opciones, lo que nos llegaría al programa o correo electrónico sería una variable Países de Europa con un valor de 1. En el correo electrónico recibiríamos: Países de Europa=1.
2º Botones de radio
Otra forma de elegir entre varias opciones son los botones de radio. La etiqueta que emplearemos ser la <input>, pero con el atributo type con el valor radio.
Sería:
<input type=radio name=”Países de Europa” value=”1”>España
<br>
<input type=radio name=”Países de Europa” value=”2”>Francia
<br>
<input type=radio name=”Países de Europa” value=”3”>Alemania
<br>
<input type=radio name=”Países de Europa” value=”4”>Reino Unido
<br>
El resultado en el navegador sería:
EspañaComo vemos a cada una de las opciones tenemos que ponerle una etiqueta input dentro de la cual le damos nombre (name) y un valor (value) diferente a cada una. En el caso que el usuario eligiese Alemania, recibiríamos en nuestro correo electrónico: Países de Europa=3.
Igual que sucedía antes con la lista de opciones, el atributo checked nos permite preseleccionar una opción, el código sería el siguiente:
<input type=radio name=”Países de Europa” value=” 1” checked>España
Veamos en efecto en el navegador:
España3º Cajas de validación
Las cajas de validación son como una especie de celdas que pueden ser activadas o desactivadas con un simple clic sobre ellas. El código en HTML es muy similar al visto anteriormente:
<input type=checkbox name=”arroz”>Me gusta el arroz
Lo veríamos así en el navegador:
Me gusta el arrozLa única diferencia con el caso de los botones de radio es el valor de atributo type que en este caso toma el valor checkbox. Y si quisiéramos que se activase la caja de validación, igual que en el caso anterior tendríamos que colocarle el atributo checked. La información que nos llegara a nuestro correo electrónico sería arroz=on, u off en el caso que no se haya activado esta casilla.