Las listas de opciones son de gran ayuda para los formularios en los que queremos
saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes
opciones planteadas previamente por nosotros. Las listas de selección u
opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más
sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte
favorito de nuestro usuarios, el código de la lista de selección
podría ser el siguiente:
Pero podemos personalizar esta lista de opciones mediante una serie de atributos.
Por ejemplo, podemos hacer que se vea más de una opción a la vez
en la lista. Para ello utilizaremos “size”, indicando el número
de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos
cambiar el código anterior por el siguiente:
También podemos definir si queremos que se pueda elegir más de
una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos
el atributo multiple. Mira primero cómo quedaría nuestro código.
Y aquí comprobarás lo que nos permite hacer este atributo.
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada
al principio no sea la primera que está en la lista. Esto se realiza
gracias al atributo selected y lo tenemos que poner en la opción que
queramos que aparezca como seleccionada. En el código siguiente, queríamos
que apareciera seleccionada la opción del tren.
Por último esta el atributo value. Este atributo es muy útil
para gestionar los datos, sobre todo si le llega a un programa. Con este atributo
lo que se le hace es atribuir un número o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del
mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos
valorar nuestras opciones de la siguiente manera:
Y en el supuesto de seleccionar por ejemplo la opción del avión,
al programa (o al correo electrónico) le llegaría el siguiente
dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.
Listas de botones: radio
A continuación vamos a ver otro tipo de listas de opciones o de selección.
Son listas con botones de tipo radio. Estos botones se escriben mediente la
etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a
cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas
van a tener el mismo nombre. El código nuevo quedaría de la siguiente
manera:
Y el cambio de aspecto es evidente. Aquí lo tenéis:
Coche
Avión
Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos
activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo,
en el código siguiente la lista de opciones tiene activada la opción
avión:
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo
por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente
y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante
type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio”
sólo permitiían elegir una opción (siempre y cuando los
nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar
una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte
todo lo que te hemos explicado anteriormente:
