CONTROLES FORMULARIOS PRIMERA PARTE

CONTROLES FORMULARIOS PRIMERA PARTE Acceder a los formularios de una página a través de su nombre Acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo id. El objeto document permite acceder directamente a cualquier formulario mediante su atributo name: var formularioprincipal = document.formulario; var formulariosecundario = document.otro_formulario; <form name="formulario" > <form name="otro_formulario" > </form Los elementos de los formularios también se pueden acceder directamente mediante su atributo name var formularioprincipal = document.formulario; var primerelemento = document.formulario.elemento; <form name="formulario"> <input type="text" name="elemento" /> Acceder a los formularios de una página a través de su id Obviamente, también se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual función document.getelementbyid() para acceder de forma directa a un formulario y a uno de sus elementos: var formularioprincipal = document.getelementbyid("formulario"); var primerelemento = document.getelementbyid("elemento"); <form name="formulario" id="formulario" > <input type="text" name="elemento" id="elemento" /> 1

Independientemente del método utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las aplicaciones: type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea. form: es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar document.getelementbyid("id_del_elemento").form 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. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y radiobutton no es muy útil, como se verá más adelante Por último, los eventos más utilizados en el manejo de los formularios son los siguientes: onclick: evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">). onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que "el otro campo de formulario ha perdido el foco". onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario. onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior "ha perdido el foco". Veamos ahora los elementos que forman un formulario, sus propiedades y eventos Para ver más propiedades y eventos En Dreamweaver utilizar panel Referencia Mayusc+F1. Libro o'reilly JavaScript Reference.Seleccionar Objeto y ver propiedades y eventos Pej Object : input ( type = text ) Object : input ( type = button ) 2

CONTROLES TEXT HTML <input type="text"> Referencia Modelo de objetos [window.]document.formname.elementname [window.]document.forms[i].elements[i] [window.]document.getelementbyid("elementid") Propidades Eventos Funciones Veamos un ejemplo <script type="text/javascript"> function fnpropiedades() // ============ Accediendo a su valor ============================= var nombre=document.getelementbyid("txtnombre").value; // var nombre=document.form1.nombre.value; // var nombre=document.forms[0].item(0).value; //IE funciona en FF y CR NO var edad=document.getelementbyid("txtedad").value; // var edad=document.form1.edad.value; // var edad=document.forms[0].item(1).value; var txt=nombre+" "+edad; document.getelementbyid("txtresultado").value=txt; // ============ Accediendo a propiedades y funciones ========= document.getelementbyid("txtnombre").size="5"; document.getelementbyid("txtnombre").readonly=true; document.getelementbyid("txtedad").select(); 3

<body> <h3>acceder al valor de un campo de texto</h3> <form name="form1"> Nombre : <input type="text" name="nombre" id="txtnombre" value="ana" size="10" > Edad : <input type="text" name="edad" id="txtedad" value="20" size="10" > <input type="button" value="pulsame" onclick="fnpropiedades()" /> Resultado: <input type="text" id="txtresultado" size="40" value="" /> <h3> Cómo usar los eventos del teclado de Javascript?</h3> <input type="text" value="onkeypress" readonly="readonly" onkeypress="alert('haz soltado una tecla.')"> <input type="text" value="onkeydown" readonly="readonly" onkeydown="alert('haz presionado una tecla.')"> <input type="text" value="onkeyup" readonly="readonly" onkeyup="alert('haz liberado una tecla.')"> <h3> Cómo usar los eventos onfocus y onblur de Javascript?</h3> <input type="text" size="50" onfocus="value='tengo el focus, puedes escribir aquí';" onblur="value='perdí el focus';"> <em>onfocus</em> Un elemento obtiene el focus <em>onblur</em> Un elemento pierde el focus <h3> Cómo usar el evento onselect de Javascript?</h3> <input class="inp" type="text" value="onselect" onselect="alert('haz seleccionado texto')"> <h3> Cómo usar el evento onchange de Javascript?</h3> <input class="inp" type="text" value="onchange" onchange="style.backgroundcolor='red';"> </body> 4

EJERCICIOS CONTROL TEXT Crear un programa que permita cargar un entero en un text y al presionar un botón nos muestre dicho valor elevado al cubo (emplear la función alert). Cargar dos números en objetos de tipo text y al presionar un botón, mostrar el mayor. Cargar un nombre y un apellido en sendos text. Al presionar un botón, concatenarlos y mostrarlos en un tercer text Crea un script que simule a una calculadora sencilla EJERCICIOS CONTROL PASSWORD Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres. Disponer dos campos de texto tipo password. Cuando se presione un botón mostrar si las dos claves ingresadas son iguales o no CONTROL SELECT Para determinar la posición del índice seleccionado en la lista document.form1.select1.selectedindex Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedindex (almacena la posición del string seleccionado de la lista, numerando a partir de cero). Para determinar el valor seleccionado: document.form1.select1.options[document.form1.select1.selectedindex].text Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio de un subíndice, al string de una determinada posición. 5

Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string). Y por último con esta expresión accedemos al valor asociado al string: document.form1.select1.options[document.form1.select1.selectedindex].value Ejemplo <script language="javascript"> function cambiarcolor() document.form1.text1.value = document.form1.select1.selectedindex; document.form1.text2.value = document.form1.select1.options[document.form1.select1.selectedindex].text; document.form1.text3.value = document.form1.select1.options [document.form1.select1.selectedindex].value; <form name="form1"> <select size="1" name="select1" onchange="cambiarcolor()"> <option value="0xff0000">rojo</option> <option value="0x00ff00">verde</option> <option value="0x0000ff">azul</option> </select> Número de índice seleccionado del objeto SELECT:<input type="text" name="text1"> Texto seleccionado:<input type="text" name="text2"> Valor asociado:<input type="text" name="text3"> EJERCIOS SELECT Confeccionar una página que muestre un objeto SELECT con distintos tipos de pizzas (Jamón y Queso, Mozzarella, Morrones). Al seleccionar una, mostrar en un objeto de tipo TEXT el precio de la misma. Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar: - Procesador (Pentium III - $400, Pentium IV $500). - Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550) - Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500) Para cada característica indicamos string a mostrar (Ej. Pentium III) y el valor asociado a dicho string (Ej. 400). Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT. 6

Confeccionar una página que permita seleccionar una pizza y la cantidad de unidades. Luego al presionar un botón calcular el importe a pagar. Utilizar un objeto de la clase SELECT para la selección de la pizza, pudiendo ser: - Queso: $ 4. - Jamón y queso: $ 6. - Especial: $ 10. A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la clase TEXT mostrar el importe total a abonar. Confeccionar una página que permita crear un examen. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al presionar un botón mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT). CONTROL CHECKBOX Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador. <script language="javascript"> function contarseleccionados() var cant=0; if (document.form1.lenguaje1.checked) cant++; if (document.form1.lenguaje2.checked) cant++; if (document.form1.lenguaje3.checked) cant++; if (document.form1.lenguaje4.checked) cant++; alert('conoce ' + cant + ' lenguajes'); <form name="form1"> <input type="checkbox" name="lenguaje1">javascript <input type="checkbox" name="lenguaje2">php <input type="checkbox" name="lenguaje3">jsp <input type="checkbox" name="lenguaje4">vb.net <input type="button" value="mostrar" onclick="contarseleccionados()"> 7

EJERCICIOS CHECBOX Confeccionar una página que muestre tres checkbox que permitan seleccionar los deportes que practica el usuario (Futbol, Basket, Tennis) Mostrar al presionar un botón los deportes que a elegido CONTROL RADIO Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario: <script language="javascript"> function mostrarseleccionado() if (document.form1.estudios[0].checked) alert('no tienes estudios'); if (document.form1.estudios[1].checked) alert('tienes estudios primarios'); if (document.form1.estudios[2].checked) alert('tienes estudios secundarios'); if (document.form1.estudios[3].checked) alert('tienes estudios universitarios'); <form name="form1"> <input type="radio" name="estudios" value="sin estudios">sin estudios <input type="radio" name="estudios">primarios <input type="radio" name="estudios">secundarios <input type="radio" name="estudios">universitarios <input type="button" value="mostrar" onclick="mostrarseleccionado()"> EJERCICIOS RADIO Confeccionar una página que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 años o no. Al presionar un botón mostrar que radio está seleccionado. CONTROL TEXTAREA Este control es similar al control TEXT, salvo que permite el ingreso de muchas líneas de texto. La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla. 8

Ejemplo: Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres. <html> <head> </head> <body> <script language="javascript"> function controlarcaracteres() if (document.form1.curriculum.value.length>2000) alert('curriculum muy largo'); else alert('datos correctos'); <form name="form1"> <textarea name="curriculum" rows="10" cols="50" ></textarea> <input type="button" value="mostrar" onclick="controlarcaracteres()"> </body> </html> EJERCICIO TEXTAREA Confeccionar una página de visitas a un sitio, solicitar ingresar el nombre de una persona, su mail y los comentarios (TEXTAREA). Mostrar luego llamando a la función alert los datos ingresados. Cuenta los caracteres escritos en un textarea 9

EVENTOS ONFOCUS Y ONBLUR El evento onfocus se dispara cuando el objeto toma foco y el evento onblur cuando el objeto pierde el foco. Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo está vacío. <script language="javascript"> function vaciar(control) control.value=''; function verificarentrada(control) if (control.value=='') alert('debe ingresar datos'); <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onfocus="vaciar(this)" onblur="verificarentrada(this)"> Ingrese su edad: <input type="text" name="edad" onfocus="vaciar(this)" onblur="verificarentrada(this)"> <input type="button" value="confirmar"> EJERCICIO Solicitar que se ingrese el nombre y la clave de un usuario. Mostrar una ventana de alerta si en la clave se ingresan menos de 7 caracteres o más de 20. OnBlur - Comprobar si el valor de una caja de texto es un numero. Pista IsNaN() 10

EVENTOS ONMOUSEOVER Y ONMOUSEOUT El evento onmouseover se ejecuta cuando pasamos la flecha del mouse sobre un hipervínculo y el evento onmouseout cuando la flecha abandona el mismo. Para probar estos eventos implementaremos una página que cambie el color de fondo del documento. Implementaremos una función que cambie el color con un valor que llegue como parámetro. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo del documento: Imagen efecto rollover, al pasar el raton por encima de la imagen se cambia, y al salir de la imagen se muestra la original EVENTO ONLOAD El evento onload se ejecuta cuando cargamos una página en el navegador. Uno de los usos más frecuentes es para fijar el foco en algún control de un formulario, para que el operador no tenga que activar con el mouse dicho control. Este evento está asociado a la marca body. Haz yb script para comprobarlo 11