diapositiva formulario

Download Diapositiva formulario

If you can't read please download the document

Post on 18-Nov-2014

999 views

Category:

Education

0 download

Embed Size (px)

DESCRIPTION

diapositiva relacionada a los formularios en java script

TRANSCRIPT

  • 1. UNIVERSIDAD DE PANAMCENTRO REGIONAL UNIVERSITARIOS DE COCL MATERIA: PROGRAMACION WEB CAPITULO 7: FORMULARIOS POR: ROSA MENESES HECTOR GUZMAN R JUNIO 2012
  • 2. CONTENIDO7.1 Propiedades bsicas de formulario y elementos 7.2 Utilidades bsicas para formulario 7.3 Validacin
  • 3. 7.1 Propiedades bsicas de formulario y elementosJava Script dispone de numerosas propiedades funcionescuando se carga una pgina web, el navegador crea automticamente un array llamado forms y accede al array forms, se utiliza el objeto document. El array que contiene todos los formularios de la pgina. La siguiente instruccin accede al primer formulario de la pgina: document.forms[0];
  • 4. 7.1 Propiedades bsicas de formulario y elementosEl navegador crea automticamente un array llamadoelements,cada array contiene la referencia a todosUtilizando la sintaxis de los arrays, se obtiene elprimer elemento del primer formulario de la pgina:document.forms[0].elements[0];El siguiente ejemplo muestra como obtener el ltimoelemento del primer formulario de la pgina:document.forms[0].elements[document.forms[0].elements.le ngth-1];
  • 5. 7.1 Propiedades bsicas de formulario y elementosEl objeto document permite acceder directamente acualquier formulario mediante su atributo name:var formularioPrincipal = document.formulario;var formularioSecundario = document.otro_formulario;......
  • 6. 7.1 Propiedades bsicas de formulario y elementosLos elementos de los formularios tambin sepueden acceder directamente mediante su atributo name:var formularioPrincipal = document.formulario;var primerElemento = document.formulario.elemento;
  • 7. 7.1 Propiedades bsicas de formulario y elementosEl siguiente ejemplo utiliza la funcion document.getElementById()para acceder de forma directa a un formularioy a uno de sus elementos:var formularioPrincipal = document.getElementById("formulario");var primerElemento = document.getElementById("elemento");
  • 8. 7.1 Propiedades bsicas de formulario y elementosCada elemento dispone de las siguientes propiedadestiles para el desarrollo de las aplicaciones: type: indica el tipo de elemento que se trata Para los elementos de tipo (text, button, checkbox, etc.) coincide con el valor de su atributo type
  • 9. 7.1 Propiedades bsicas de formulario y elementos form: es una referencia directa al formulario al que pertenece el elemento. name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.value: permite leer y modificar el valor del atributo value de XHTML
  • 10. 7.1 Propiedades bsicas de formulario y elementosLos eventos mas utilizados en los formularios: onclick: evento que se produce cuando se pincha con el ratn sobre un elemento onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto ( o ) onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario.
  • 11. 7.2 Utilidades bsicas para los formularios7.2.1 Obtener el valor de los campos del formulario La mayora de tcnicas JavaScript relacionadas con los formularios requieren modificar el valor de los Campos del formulario. Por tanto, a continuacin se muestra cmo obtener El valor de los campos de formulario ms utilizados.
  • 12. 7.2 Utilidades bsicas para los formularios 7.2.1.1 Cuadro de Texto y TextareaEl valor del texto mostrado por estos elementos se obtiene y se establece directamente mediante la propiedad value. var valor = document.getElementById("texto").value; var valor = document.getElementById("parrafo").value;
  • 13. 7.2 Utilidades bsicas para los formularios 7.2.1.2 Radiobutton La propiedad checked devuelve true para el radiobutton seleccionado y false en cualquier otro caso. Si por ejemplo se dispone del siguiente grupo de radiobuttons: SI NO NS/NC
  • 14. 7.2 Utilidades bsicas para los formularios 7.2.1.3 Checkbox Los elementos de tipo checkbox son muy similares a los radiobutton, los checkbox se pueden seleccionar de forma independiente respecto de los dems. He ledo y acepto las condiciones He ledo la poltica de privacidad
  • 15. 7.2 Utilidades bsicas para los formularios 7.2.1.3 Checkbox Utilizando la propiedad checked se comprueba si Cada checkbox ha sido utilizado: var elemento = document.getElementById("condiciones"); alert(" Elemento: " + elemento.value + "n Seleccionado: " +elemento.checked
  • 16. 7.2 Utilidades bsicas para los formularios 7.2.1.4 Select Las listas desplegables () son los elementos en los que es ms difcil obtener su valor. Si se dispone de una lista desplegable como la siguiente:Primer valorSegundo valorTercer valorCuarto valor
  • 17. 7.2 Utilidades bsicas para los formularios 7.2.2. Establecer el foco en un elemento Para asignar el foco a un elemento de XHTML, se utiliza la funcin focus(). El siguienteejemplo asigna el foco a un elemento de formulario cuyo atributo id es igual a primero: document.getElementById("primero").focus();
  • 18. 7.2 Utilidades bsicas para los formularios 7.2.2. Establecer el foco en un elemento Ampliando el ejemplo anterior, se puede asignar automticamente el foco del programa al primer elemento del primer formulario de la pgina, independientemente del id del formulario y de los elementos:if(document.forms.length > 0) {if(document.forms[0].elements.length > 0) {document.forms[0].elements[0].focus();}}
  • 19. 7.2 Utilidades bsicas para los formularios7.2.3. Evitar el envio duplicado de un formulario Uno de los problemas habituales con el uso de formularios web es la posibilidad de que el usuario pulse dos veces seguidas sobre el botn "Enviar Por este motivo, una buena prctica en el diseo de aplicaciones web suele ser la de deshabilitar el botn de envo despus de la primera pulsacin.
  • 20. 7.2 Utilidades bsicas para los formularios7.2.3. Evitar el envio duplicado de un formulario ... Cuando se pulsa
  • 21. 7.2 Utilidades bsicas para los formularios7.2.4. Limitar el tamao de caracteres de un textarea JavaScript permite aadir esta caracterstica de forma muy sencilla. En primer lugar, hay que recordar que con algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false. Si un evento devuelve el valor true, funciona asi:
  • 22. 7.2 Utilidades bsicas para los formularios7.2.4. Limitar el tamao de caracteres de un textarea Otro Ejemplo: Como el valor devuelto por el evento onkeypress es igual a false, el navegador no ejecuta el comportamiento por defecto del evento, y no importa la tecla pulsada, ese textarea no permitir escribir ningn carcter.
  • 23. 7.3 ValidacinLa validacin de un formulario consiste en llamar a una funcin de validacin cuando el usuario pulsa sobre el botn de envo del formulario. En esta funcin, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicacin.
  • 24. 7.3 ValidacinY el esquema de la funcin validacin() es el siguiente:function validacin() {if (condicion que debe cumplir el primer campo del formulario) {// Si no se cumple la condicion...alert([ERROR] El campo debe tener un valor de...);return false;}else if (condicion que debe cumplir el segundo campo del formulario) {// Si no se cumple la condicion...alert([ERROR] El campo debe tener un valor de...);return false;}
  • 25. 7.3 Validacinelse if (condicion que debe cumplir el ltimo campo del formulario) {// Si no se cumple la condicion...alert([ERROR] El campo debe tener un valor de...);return false;}// Si el script ha llegado a este punto, todas las condiciones// se han cumplido, por lo que se devuelve el valor truereturn true;
  • 26. 7.3 Validacinelse if (condicion que debe cumplir el ltimo campo del formulario) {// Si no se cumple la condicion...alert([ERROR] El campo debe tener un valor de...);return false;}// Si el script ha llegado a este punto, todas las condiciones// se han cumplido, por lo que se devuelve el valor truereturn true;
  • 27. 7.3 Validacin 7.3.1. Validar un campo de texto obligatorio Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en losque sea obligatorio. La condicin en JavaScript se puede indicar como: valor = document.getElementById("campo").value;if( valor == null || valor.length == 0 || /^s+$/.test(valor) ) { return false; }
  • 28. 7.3 Validacin7.3.2. Validar un campo de texto con valores numricos Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La condicin JavaScript consiste en: valor = document.getElementById("campo").value; if( isNaN(valor) ) { return false; }
  • 29. 7.3 Validacin7.3.2. Validar que se ha seleccionado una opcin de una lista Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable Ejemplo:ndice=document.getElementById("opciones").selectedIndex; if( indice == null || indice == 0 ) { return false; } - Selecciona un valor -Primer valorSegundo valor
  • 30. 7.3 Validacin7.3.2. Validar que se ha seleccionado una opcin de una lista
  • 31. BIBLIOGRAFIAIntroduccion a JavaScript. Autor:Javier Eguiluz Perez
  • 32. MUCHASGRACIAS