Completo tutorial de HTML - Otros elementos de formulario

Efectivamente, los textos son un manera muy practica de hacernos llegar la
información del navegante. No obstante, en muchos casos, los textos son
difícilmente adaptables a programás que puedan procesarlos debidamente o bien,
puede que su contenido no se ajuste al tipo de información que requerimos. Es
por ello que, en determinados casos, puede resultar más efectivo proponer una
elección al navegante a partir del planteamiento de una serie de opciones.


Este es el caso de, por ejemplo, ofrecer una lista de países, el tipo de
tarjeta de crédito para un pago,...


Este tipo de opciones pueden ser expresadas de diferentes formás. Veamos a
continuación cuales son:




Listas de opciones

Las listas de opciones son ese tipo de menús desplegables que nos permiten
elegir una (o varias) de las múltiples opciones que nos proponen. Para
construirlas emplearemos una etiqueta con su respectivo cierre: <select>


Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre
por medio del atributo name. Cada opción será incluida en una línea precedida de
la etiqueta <option>.


Podemos ver, a partir de estas directivas, la forma más típica y sencilla de
esta etiqueta:




<select name="estacion">

---

<option>Primavera</option>

---

<option>Verano</option>

---

<option>Otoño</option>

---

<option>Invierno</option>

---

</select>

---

El resultado es: 




PrimaveraVeranoOtoñoInvierno





Esta estructura puede verse modificada principalmente a partir de otros dos
atributos:

---

size
Indica el número de valores mostrados de la lista. El resto pueden ser vistos
por medio de la barra lateral de desplazamiento.

---

multiple

---

Permite la selección de más varios elementos de la lista. La elección de más de
un elemento se hace como con el explorador de Windows, a partir de las teclas
ctrl o shift. Este atributo se expresa sin valor alguno, es decir, no se utiliza
con el igual: simplemente se pone para conseguir el efecto, o no se pone si
queremos una lista desplegable común.

|| Consejo: Si es posible, no uses multiple

---

No recomendamos especialmente la puesta en practica de esta opción ya que el
manejo de las teclas ctrl o shift para elegir varias opciones puede ser
desconocido para el navegante. Evidentemente, siempre cabe la posibilidad de
explicarle como funciona aunque no dejara de ser una complicación para más
para el visitante. ||

Veamos cual es el efecto producido por estos dos atributos cambiando la línea:

---

<select name="estacion">

---

por:

---

<select name="estacion" size="3" multiple>

---

La lista quedara de esta forma: 
 




PrimaveraVeranoOtoñoInvierno





La etiqueta <option> puede asimismo ser matizada por medio de otros
atributos

---

selected
Del mismo modo que multiple, este atributo no toma ningún valor sino que
simplemente indica que la opción que lo presenta esta elegida por defecto.

---

Así, si cambiamos la línea del código anterior:

---

<option>Otoño</option>

---

por:

---

<option selected>Otoño</option>

---

El resultado será: 




PrimaveraVeranoOtoñoInvierno




value

---

Define el valor de la opción que será enviado al programa o correo electrónico
si el usuario elige esa opción. Este atributo puede resultar muy útil si el
formulario es enviado a un programa puesto que a cada opción se le puede asociar
un número o letra, lo cual es más fácilmente manipulable que una palabra o texto.
podríamos así escribir líneas del tipo:

---

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

---

De este modo, si el usuario elige primavera, lo que le llegara al programa (o
correo) es una variable llamada estacion que tendrá com valor 1. En el correo
electrónico recibiríamos:

---

estacion=1

---

Botones de radio

---

Existe otra alternativa para plantear una elección, en este caso, obligamos al
internauta a elegir únicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es <input> en la cual tendremos el atributo
type ha de tomar el valor radio. Veamos un ejemplo:

---

<input type="radio" name="estacion" value="1">Primavera

---

<br>

---

<input type="radio" name="estacion" value="2">Verano

---

<br>

---

<input type="radio" name="estacion" value="3">Otoño

---

<br>

---

<input type="radio" name="estacion" value="4">Invierno
||
||
|| Nota: Hay que fijarse que la etiqueta <input type="radio"> sólo coloca la casilla pinchable en la página.
Los textos que aparecen al lado, así como los saltos de línea los colocamos
con el correspondiente texto en el código de la página y las etiquetas HTML
que necesitemos. ||





El resultado es el siguiente: 

---

Primavera

---

Verano

---

Otoño

---

Invierno




Como puede verse, a cada una de las opciones se le atribuye una etiqueta
input dentro de la cual asignamos el mismo nombre (name) para todas las opciones
y un valor (value) distinto. Si el usuario elige supuestamente Otoño,
recibiremos en nuestro correo una línea tal que esta:

---

estacion=3

---

Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto
puede ser conseguido por medio del atributo checked:

---

<input type="radio" name="estacion" value="2" checked>Verano

---

Veamos el efecto: 




Primavera

---

Verano

---

Otoño

---

Invierno






Cajas de validación

---

Este tipo de elementos pueden ser activados o desactivados por el visitante por
un simple clic sobre la caja en cuestión. La sintaxis utilizada es muy similar a
las vistas anteriormente:

---

<input type="checkbox" name="paella">Me gusta la paella

---

El efecto: 




Me gusta la paella





La única diferencia fundamental es el valor adoptado por el atributo type.

---

Del mismo modo que para los botones de radio, podemos activar la caja por medio
del atributo checked.

---

El tipo de información que llegara a nuestro correo (o al programa) será del
tipo:

---

paella=on (u off dependiendo si ha sido activada o no)