JavaScript 2

| Geovanni Figueroa M.  | Revista Digital Matemática, Educación e Internet |

 

 

 1 2 3 4  

 

Más sobre formularios.

Segunda parte

 JavaScript


G. Figueroa M.
Escuela de Matemática
Instituto Tecnológico de Costa Rica


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:

  1. Crear el diseño del formulario.

  2. 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

 

Campos de texto

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.

 

Botones de opción

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.

 

 

Examen corto

 

1) Aproximadamente cuánto mide el área de la región sombreada de la figura que se muestra?

80 m2
200.96 m2
50.27 m2
39.44 m2
25.12 m2

2) El triángulo de la figura es rectángulo en B. Cuánto miden los ángulos x e y ?

45 y 95 grados, respectivamente.
40 y 95 grados, respectivamente.
45 y 85 grados, respectivamente.
50 y 95 grados, respectivamente.
40 y 85 grados, respectivamente.

 

3) Calcule el área sombreada que se muestra en la figura

m2
m2
m2
m2
m2

 

Nota:

 

El código del guión es el siguiente

 

Código: Examen corto

 

 


 1 2 3 4 

Revista Virtual, Matemática Educación e Internet.
Derechos Reservados.