CONTROLES FORMULARIOS – PRIMERA PARTE Acceder a los

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>
<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" />
</form>
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" />
</form>
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();
}
</script>
3
<body>
<h3>Acceder al valor de un campo de texto</h3><br>
<form name="Form1">
Nombre : <input type="text" name="Nombre" id="txtNombre" value="Ana" size="10" ><br>
Edad : <input type="text" name="Edad" id="txtEdad" value="20" size="10" ><br>
<input type="button" value="Pulsame" onclick="fnPropiedades()" />
Resultado: <input type="text" id="txtResultado" size="40" value="" />
</form>
<h3>¿Cómo usar los eventos del teclado de Javascript?</h3><br>
<input type="text" value="onkeypress" readonly="readonly" onkeypress="alert('Haz soltado una
tecla.')"><br>
<input type="text" value="onkeydown" readonly="readonly" onkeydown="alert('Haz presionado una
tecla.')"><br>
<input type="text" value="onkeyup" readonly="readonly" onkeyup="alert('Haz liberado una
tecla.')"><br><br>
<h3>¿Cómo usar los eventos onfocus y onblur de Javascript?</h3><br>
<input type="text" size="50" onfocus="value='Tengo el focus, puedes escribir aquí';"
onblur="value='Perdí el focus';"><br>
<em>onfocus</em> Un elemento obtiene el focus<br>
<em>onblur</em> Un elemento pierde el focus<br><br>
<h3>¿Cómo usar el evento onselect de Javascript?</h3><br>
<input class="inp" type="text" value="onselect" onselect="alert('Haz seleccionado
texto')"><br><br>
<h3>¿Cómo usar el evento onchange de Javascript?</h3><br>
<input class="inp" type="text" value="onchange"
onchange="style.backgroundColor='red';"><br><br>
</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;
}
</script>
<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>
<br>
Número de índice seleccionado del objeto SELECT:<input type="text" name="text1"><br>
Texto seleccionado:<input type="text" name="text2"><br>
Valor asociado:<input type="text" name="text3"><br>
</form>
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');
}
</script>
<form name="form1">
<input type="checkbox" name="lenguaje1">JavaScript<br>
<input type="checkbox" name="lenguaje2">PHP<br>
<input type="checkbox" name="lenguaje3">JSP<br>
<input type="checkbox" name="lenguaje4">VB.Net<br>
<input type="button" value="Mostrar" onClick="contarSeleccionados()">
</form>
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');
}
</script>
<form name="form1">
<input type="radio" name="estudios" value="sin estudios">Sin estudios
<br>
<input type="radio" name="estudios">Primarios
<br>
<input type="radio" name="estudios">Secundarios
<br>
<input type="radio" name="estudios">Universitarios
<br>
<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');
}
</script>
<form name="form1">
<textarea name="curriculum" rows="10" cols="50" ></textarea>
<br>
<input type="button" value="Mostrar" onClick="controlarCaracteres()">
</form>
</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');
}
</script>
<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>
Ingrese su edad:
<input type="text" name="edad" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>
<input type="button" value="Confirmar">
</form>
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