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:
texto básicas se escribirá.
<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">Para obtener el siguiente resultado:
<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>Y aquí comprobarás lo que nos permite hacer este atributo.
<option>Coche</option>
<option>Avión</option>
<option>Tren</option>
</select>
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">CocheY el cambio de aspecto es evidente. Aquí lo tenéis: Coche
<br>
<input type="radio" name="transporte" value="2">Avión
<br>
<input type="radio" name="transporte" value="3">Tren
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:
<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
Aquí lo tenéis: Avión
Tren
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos