Las formas (Form Inputs) son muy importantes para algunas páginas web. La entrada de las
formas es enviada al servidor la mayoría de las veces. Primero quiero mostrale como se
puede validar una forma. Entonces daremos un vistazo a las posibilidades de dar información
al cliente con JavaScript o con HTML.
Primero que todo, queremos crear un simple script. La página de HTML contendrá dos elementos de texto. El usuario tiene que escribir su nombre dentro del primer elemento y su dirección e-mail dentro del segundo. Usted puede escribir cualquier cosa dentro de algún elemento de la forma y luego presionar el botón. También intentelo no escribiendo nada y presionando el botón.
Con respecto a la entrada del primer elemento, usted recibirá un mensaje de error si no escribe nada. Cualquier entrada es vista como válida. Por supuesto, esto no previene al usuario de escribir un nombre errado. El browser inclusive acepta números. De tal manera que si usted escribe 27, el mensaje será 'Hola 27!'.Así es el script para las dos 'form input' y para la validación de estos:
<html> <head> <script language="JavaScript"> <!-- Hide function test1(form) { if (form.text1.value == "") alert("Por favor escriba su entrada!") else { alert("Hola "+form.text1.value+"! Su entrada es correcta!"); } } function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) alert("Direccion e-mail no valida!"); else alert("OK!"); } // --> </script> </head> <body> <form name="first"> Escriba su nombre:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Comprobacion" onClick="test1(this.form)"> <P> Escriba su direccion e-mail:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Comprobacion" onClick="test2(this.form)"> </body>
Primero observemos el código HTML en la sección 'body'. Solamente creamos dos
elementos de texto y dos botones. Los botones invocan la función test1(...) o test2(...)
dependiendo de que botón es presionado. Pasamos this.form a las funciones para que
sea posible direccionar los elementos correctos en las funciones mas adelante.
La función test1(form) comprueba si la entrada es vacía. Esto es hecho por medio de
form.text1. Para ver si la entrada es vacía la comparamos con "".
Si la entrada iguala a "" entonces nada fue escrito. El usuario obtendrá un mensaje de error.
Si algo es escrito el usuario recibirá un ok.
El problema aquí es que el usuario puede entrar solo espacios. Esto es visto como una
entrada válida. Si usted también quiere, puede por supuesto mirar estas posibilidades
y excluirlas. Creo que con la información dada aquí esto es completamente fácil.
Ahora miremos la función test2(form). Esta función de nuevo compara la entrada
con el equivalente a "" para estar seguro de que algo a sido escrito. Pero hemos agregado algo al comando
'if'. El || es llamado el operador OR. Usted aprendió acerca de ellos en la sección 6 de esta
introducción.
El comando if chequea si cualquiera de las dos comparaciones, la primera y la
segunda son reales. Si por lo menos una de ellas es verdadera, el comando if lo toma como real y el
siguiente comando será ejecutado. Esto significa que usted obtendrá un mensaje de error si no
escribió nada o si no hay una @ en su entrada. La segunda operación en el comando if es vista
si la entrada contiene una @.
¿Cuáles son las diferentes posibilidades que existen de enviar el contenido de una forma?
La manera más fácil de enviar el contenido de una forma es via e-mail. Este es el
método que vamos a observar un poco más de cerca. Si usted desea que la gente le
envíe sus comentarios sin utilizar e-mail y que el servidor manipule la información por
sí solo, deberá utilizar CGI (Common Gateway Interface). Usted necesitará CGI si
por ejemplo desea tener elementos de busqueda en su página como YAHOO en donde el usuario
recibe un resultado rápido después de dar su entrada en una FORMA. El no tiene que
esperar hasta que la gente lea su entrada, manipule la información y le envíen una respuesta.
Esto es hecho automaticamente por el servidor. JavaScript no posee la funcionalidad de hacer cosas
como esta. Inclusive si usted crear un 'guestbook', no puede hacer que el servidor adicione
información a una página HTML con JavaScript. Solo CGI es capaz de hacer esto por el
momento. Por supuesto usted puede crear un guestbook respondiendo a la gente via e-mail. Aunque
usted tiene que escribir toda la información que recibirá el usuario.
Este script es puro HTML. JavaScript no se necesita aquí. Solo, si usted desea chequear la entrada en la forma como lo vimos atrás. Hay que tener en cuenta que el comando mailto no funciona para todos los browsers.
<FORM METHOD=POST ACTION="mailto:aqui_va@su_direccion_e-mail"> <H3>Le gusta esta pagina?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">No del todo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Es una perdida de tiempo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">El peor sitio en la red.<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send"> </FORM>Usted obtendrá el resultado via e-mail haciendo esto. El_único problema es que recibirá un mail que puede parecer un poco encriptado a primera vista. Algunas veces todos los espacios son llenados con un signo '+' y otras veces son llenados con '%20'. Es+algo+mas+o+menos+asi.Creo que existen algunos buenos programas en la Red que pondrían el mensaje en una forma mas agradable.
Existe otra cosa interesante que pueden hacer sus elementos de FORMAS un poco mas amigables.
Usted puede definir qué elemento es enfocado al comienzo. O puede decirle al browser
que enfoque la forma donde la entrada del usuario fue errónea. Esto significa que el
browser pondrá el cursor en el elemento de la forma especificada de modo que el usuario
no tiene que hacer click en ésta antes de escribir algo. Esto lo puede hacer mediante el
siguiente script:
function setfocus() { document.first.text1.focus(); return; }
Esta función enfocaría el primer elemento de texto en el script que mostré arriba. Se debe especificar el nombre completo de la FORMA la cual aquí es llamada first y el nombre del simple elemento de la forma, aquí text1. Si quiere enfocar este elemento cuando la página es cargada, es necesario agregar la propiedad onLoad a su tag <body>. Este se ve así:
<body onLoad="setfocus()">
Index - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 6