|

Introducción a JavaScript
Parte 7
| 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. Porsupuesto, 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!'. Como luce el script para las dos 'form input' y para la validación de estos? Aquí va: <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.
<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.
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 aqui es llamada first y el nombre del simple elemento de la forma, aquí text1. Si usted quiere enfocar este elemento cuando la página es cargada, es necesario agregar la propiedad onLoad a su tag <body>. Este luce mas o menos así: <body onLoad="setfocus()"> Index - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 6
|