En está segunda parte vamos a retomar el tema de los formularios, pues
nos permiten interactuar con el usuario, recibiendo y presentando información.
Los formularios pueden recoger todo tipo de información: datos demograficos
como edad, sexo, respuesta a preguntas, números, etc. Se pueden usar
los como instrumentos de navegación, haceindo clik en un botón
podemos ir a una cierta página web.
Crear un formulario consta , por lo general, de dos pasos independientes:
-
Crear el diseño del formulario.
-
Escribir un pequeño programa que procese los datos del formulario,
usualmente llamado script.
Los scripts pueden residir en el servidor y en este caso se les conoce como
scripts CGI (Common interface Gateway). Son la manera que tiene el usuariode
interactuar con el servidor atravéz de una página Web, por ejemplo,
para buscar un elemento en una base de datos, para enviar información
relacionada a una compra, etc. Este tipo de scripts se escriben usualmente en
lenguajes como : PHP, Perl y otros. Su existencia pasa inadvertida para el usuario,
pues la mayor parte del trabajo la realiza el servidor.
La contra parte a este tipo de scripts son los que residen en la máquina
del usuario y están embebidos en la página Web que el usuario
está visitando. En este caso el trabajo lo realiza la máquina
cliente (es decir, la del usuario) y de esta forma no se recargan las labores
del servidor. Este tipo de scripts se escriben en lenguajes como JavaScript
y usualemente están dentro del código HTML. Este tipo de scripts
es el que hemos estado desarrollando.
En el diseño del formulario interviene básicamente código
HTML: la etiqueta de apertura <FORM> y la de cierre </FORM>. Y dentro
de estas, cada uno de los elementos del formulario además de cualquier
otro contenido necesario, como tablas, encabezados, párrafos, etcétera.
Se pueden colocar, en una página, tantos formularios como se desee, pero
no se pueden anidar, es decir, no se puede insertar una etiqueta <FORM>
dentro de otra.
La etiqueta de apertura <FORM> por lo regular incluye dos atributos:
METHOD y ACTION. El atributo METHOD puede tener el valor de GET o POST los cuales
determinan la forma en que los datos se envían al servidor. El atributo
ACTION señala al script que acción se procesará en el servidor.
El valor de ACTION puede indicarse como trayectoria relativa o el URL completo
del script que se encuentra en el sevidor o en alguna otra parte. Por ejemplo,
en el siguiente formulario se llama al script contador.cgi que se encuentra
en el directori cgi-bin del servidor www.itcr.ac.cr:
<FORM METHOD=POST ACTION="https://tec.ac.cr/cgi-bin/contador/cgi"
>
.............................elementos de formulario..........................................
<FORM>
Para los ejemplos que vamos a desarrollar usamos el siguientes esquema de formulario,
en el cual no incluimos los atributos METHOD y ACTION, pues los scripts que
desarrollaremos serán del lado del cliente y no será necesario
enviar nuestros datos al servidor.
<FORM name= "formulario" >
--------------- elementos del formulario---------------------------------
<FORM>
Ahora vamos a conocer el tipo de elementos que podemos poner dentro de un formulario
Los campos de texto le permiten al usuario escribir algo en un campo de una
sóla línea. Si fuera necesario más líneas se debe
usar el elemento <TEXTAREA>, que veremos más adelante.
Para crear un campo de texto se puede TYPE="text" en la etiquera
<INPUT>, o bien, omitir por completo la especificación TYPE. El
valor predeterminado de TYPE en la etiqueta <INPUT> es texto. También
podemos usar el atributo NAME, que indica el nombre del campo, esto es muy útil
para poder manipular los datos dentro del script.
Dentro de la etiqueta <INPUT> también podemos usar los atributos
SIZE y MAXLENGTH. SIZE indica la longitud en caracteres del campo de texto;
el tamaño predeterminado es de 20 caracteres, aunque el usuario puede
escribir todos los caracteres que desee y el texto se irá desplazando
en forma horizontal conforme se vaya excribiendo. La recomendación es
no usar un valor de SIZE que exceda los 50 caracteres con el fin de que quepa
en la mayoría de las pantallas.
MAXLENGTH permite limitar el número de caracteres que el usuario puede
escribir en el campo de texto (se descartan todos los caracteres adicionales).
Si MAXLENGTH es menor que SIZE, algunos navegadores toman este valor para SIZE.
Además del valor text, el atributo TYPE puede asumir el valor de password
(TYPE="password"). Los campos de contraseña son iguales a los
de texto, salvo que al escribir en ellos, los caracteres quedan ocultos con
asteriscos u otro símbolo.
Aunque los caracteres en un campo de contraseña se oculten, estos no
son seguros, pues son enviados al servidor como texto claro, es decir, sin encriptar
y cualquiera podría interceptarlo y leerlo cuando se desplaza por la
red. Básicamente, el ocultamiento es para ocultar la información
de alguién que se encuentre cerca del usuario.
Los botones de opción indican una lista de elementos de los cuales sólo
se puede seleccionar uno. Es decir, al seleccionar una de las opciones se deselecciona
la que estuvo activa antes.
Para los botones de opción se una "radio" como valor del artributo
TYPE. Para crear un grupo de botones de opción se usa el mismo valor
de NAME en todos los botones del grupo, además, cada botón debe
tener un atributo VALUE distinto que indicará el valor de la selección.
Podemos crear varios grupos de botones independientes entre sí, asignando
un valor diferente al atributo NAME. De antemano, no hay un botón de
opción seleccionado; pero se puede seleccionarse uno por medio del atributo
CHECKED. Cuando se envía el formulario al script se le pasa un par (nombre,
valor), correspondiente a la opción seleccionada. Este par incluye el
atributo NAME del grupo y el valor del atributo VALUE, respectivamente.
El siguiente ejemplo muestra el uso de los botones de opción en la elaboración
de una prueba corta.
