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>
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>
CocheAviónTren
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>
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
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:
<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
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="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2" checked>Avión
<br>
<input type="radio" name="transporte" value="3">Tren
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
