Formularios III: listas de opciones

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:

<select name="transporte">

<option>Coche</option>

<option>Avión</option>

<option>Tren</option>

</select>

Y el resultado quedaría de la siguiente manera.

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:

<select name="transporte" size="2">

<option>Coche</option>

<option>Avión</option>

<option>Tren</option>

</select>

Para obtener el siguiente resultado:

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:

<select name="transporte" size="2" multiple>

<option>Coche</option>

<option>Avión</option>

<option>Tren</option>

</select>

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.

<select name="transporte">

<option>Coche</option>

<option>Avión</option>

<option selected>Tren</option>

</select>

Y aquí puedes ver cuál ha sido el resultado:

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:

<select name="transporte">

<option value="1">Coche</option>

<option value="2">Avión</option>

<option value="3">Tren</option>

</select>

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 button

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 mediante 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:

<input type="radio" name="transporte" value="1">Coche

<br>

<input type="radio" name="transporte" value="2">Avión

<br>

<input type="radio" name="transporte" value="3">Tren

Y el cambio de aspecto es evidente. Aquí lo tenéis:

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:

<input type="radio" name="transporte2" value="1">Coche

<br>

<input type="radio" name="transporte2" value="2" checked>Avión

<br>

<input type="radio" name="transporte2" value="3">Tren

Y observa el resultado que obtenemos…

Listas de cajas: checkbox

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:

<input type="checkbox" name="transporte" value="1">Coche

<br>

<input type="checkbox" name="transporte" value="2" checked>Avión

<br>

<input type="checkbox" name="transporte" value="3">Tren

Y observa a continuación el resultado: