|
Master
en Artes Digitales (IUA-UPF) |
Gestión
de
Formularios
Elementos de un formulario: el objeto Form y el tag <FORM>...</FORM> | Acceso y modificación de campos de texto de formulario | Acceso y lectura de cambio de selección en un elemento lista | Ejercicios
Elementos de un formulario: el objeto Form y el tag <FORM>...</FORM>
El acceso a un formulario como objeto y a sus propiedades y sub-objetos desde JS se realiza,de forma parecida a las imágenes, desde el objeto document, tal y como se vió anteriormente en la jerarquía del browser.
Todos los formularios de un documento HTML están contenidos en un array de formularios de document, de manera que se puede acceder a cada uno de ellos a través de un índice:
document.forms[i]
Nota: Aunque de forma completa se debería referenciar como: windows.document.forms[i], usualmente se omite el window por qué el browser ya presupone que se está trabajando sobre el window actual.
No obstante, es mucho más cómodo en general, poder acceder a un formulario por su nombre. Para esto, se debe definir un name en el tag de cada formulario. Por ejemplo, si tenemos:
<form name="miForm">
entonces podemos acceder al objeto formulario que le corresponde mediante la siguiente sentencia:
document.miForm
La gestión de validación, envío y reset de un formulario queda fuera de la complejidad y el objetivo de este curso y se puede consultar en las direcciones siguientes a quien le interese su funcionamiento: event handlers, propiedades, métodos.
Tan solo diremos que el objeto form tiene una propiedad llamada elements que es un array de todos los objetos (elementos) que contiene (entradas de texto, listas, botones, etc.)
De todos los elementos de un formulario, nuestra atención se centrará en los dos que nos pueden resultar más útiles en este curso: los campos de texto o áreas de texto y las listas o menús.
Acceso y modificación de campos de texto de formulario
Dentro de un formulario podemos tener dos tipos de campos de texto:
Text field: Estos campos de texto se definen a partir de la sentencia HTML <input type="text">. Al definirse en HTML, un nuevo element de form es insertado en el array elements, de forma que podemos acceder a él para utilizar sus propiedades. No obstante, como pasa con image y con form, si le damos un nombre a este elemento, podemos acceder a él directamente, a partir de form:
<form name="miForm"> <input type="text" name="miTexto"> </form> document.miForm.miTextolo cual resulta mucho más sencillo y claro.
Text area: Estos campos de texto, aunque parecen solo diferenciarse de los anteriores por el hecho de poder aceptar más de una línea de texto, su definición en HTML es totalmente distinta:
<textarea></textarea>el cual, también se incorpora al array elements, pero que también podemos darle un nombre para acceder a él:
<form name="miForm"> <textarea name="miOtroTexto"></textarea> </form> document.miForm.miOtroTexto
Propiedades value y text:
Aunque ambos difieren en su definición en HTML, su tratamiento a nivel de JS es el mismo. En concreto, cuando se quiere leer o cambiar el texto (o valor en general) que contiene cualquiera de ellos, se debe acceder a través de la propiedad value. Es decir, que con los dos elementos definidos arriba, podríamos leer su contenido y modificar su contenido de la siguiente forma:
// Lectura del value sobre otra variable texto1 = document.miForm.miTexto.value texto2 = document.miForm.miOtroTexto.value // Escritura sobre el text del elemento document.miForm.miTexto.text = "Este es el nuevo texto que ponemos en el text field." document.miForm.miOtroTexto.text = "Este es el nuevo texto\n que ponemos en el text field.\n Aquí se ve que hay múltiples líneas."
NOTA: Incluso cuando contienen números, estos son tratados como strings. Para convertirlos en números, podemos utilizar el truco de multiplicarlos por 1.
|
Ejemplos de acceso y modificación de campos de texto de formulario Ejemplo 1 : Definir un documento HTML con un formulario que contenga un text field y un text area. Utilizando el event handler (visto en Eventos del Browser) onChange, hacer que cada vez que el usuario ponga un valor en uno de ellos, se abra un alert() mostrando el valor que se ha introducido. Ejemplo 2 : Definir un documento HTML con un formulario que contenga un text field y un text area. Utilizando el event handler (visto en Eventos del Browser) onChange, hacer que cada vez que el usuario ponga un valor en uno de ellos, el elemento modificado copie su valor al del otro. |
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function notifica(quien){
if(quien==0){
alert("El nuevo valor de Text es: " + document.miForm.miTexto.value)
}
else{
alert("El nuevo valor de Textarea es: " + document.miForm.miOtroTexto.value)
}
}
//-->
</script>
</head>
<body>
<form name="miForm">
<input type="text" name="miTexto" onChange="notifica(0)">
<textarea name="miOtroTexto" onChange="notifica(1)"></textarea>
</form>
</body>
</html>
<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
function copia(quien){
if(quien==0){
document.miForm.miOtroTexto.value = document.miForm.miTexto.value
}
else{
document.miForm.miTexto.value = document.miForm.miOtroTexto.value
}
}
//-->
</script>
</head>
<body>
<form name="miForm">
<input type="text" name="miTexto" onChange="copia(0)">
<textarea name="miOtroTexto" onChange="copia(1)"></textarea>
</form>
</body>
</html>
Acceso y lectura de cambio de selección en un elemento lista
Ahora veremos un tipo más de elemento de formulario: el select, que aunque puede tener un formateo de lista o de menú desplegable, sigue siendo el mismo elemento y tipo de comportamiento:
select como menú: Estos elementos se definen en HTML de la siguiente forma:
<form name="miForm"> <select name="miMenu">
</select>
</form> document.miForm.miMenuy como vemos se accede a él mediante el nombre del formulario y el nombre que le damos al menú.
select como lista: Las listas tan solo se diferencían de los menús por el hecho que se define el número de líneas de opciones que aparecerán en pantalla, estríctamente mayor que 1:
<form name="miForm"> <select name="miLista" size=2>
</select>
</form> document.miForm.miListasi el size es igual a 1, entonces es equivalente a no ponerlo y por lo tanto su apariencia es de menú desplegable en vez de lista.
Propiedad options de select:
En cualquier caso, ninguno de los dos elementos anteriores tiene definidas las opciones que se ofrecerán al usuario. Estas opciones se definen de la siguiente forma:
<form name="miForm">
<select name="miMenu">
<option value="valor_opcion1">Texto Opción 1</option>
<option value="valor_opcion2">Texto Opción 2</option>
...
...
...
</select>
</form>
Como podemos ver, estas opciones son sub-elementos de los elementos menú y lista. Esto significa que son hijos en la jerarquía de objetos de browser (ver el diagrama en Jerarquía de objetos de Browser). Estos hijos llamados option son accesibles, desde la propiedad options de select, en forma de array de forma que para acceder a la primera opción definida arriba se utilizaría la sentencia:
document.miForm.miMenu.options[0]
Veamos ahora cómo podemos trabajar con las opciones.
Propiedad selectedIndex de select:
Esta propiedad de los menús y las listas, nos dice cual de las opciones está seleccionada (en caso de que se defina la posibilidad de selección múltiple, nos dirá la primera). De esta forma, podemos acceder a la opción seleccionada en el menú definido arriba de la siguiente forma:
document.miForm.miMenu.options[document.miForm.miMenu.selectedIndex]
Como vemos, utilizamos selectedIndex como índice del array de options.
Los objetos Option
A continuación veremos cómo podemos saber el contenido de las opciones y cómo utilizar los elementos listas y menús de formulario en ejemplos concretos.
Propiedades de option:
Las propiedades que los objetos option ofrecen son las siguientes:
| length |
A través de esta propiedad podemos saber cuántos elementos tiene el array de opciones, en otras palabras, cuantas opciones se ofrecen al usuario en ese menú o lista. Esto se realiza de la siguiente forma (siguiendo la definición de miMenu de arriba): document.miForm.miMenu.options.length De esta forma podemos recorrer todo el array si necesidad de saber a priori cuantos elementos tiene. |
| defaultSelected |
A través de esta propiedad podemos saber si una opción es la seleccionada por defecto. Es decir, nos devuelve un valor booleano (true o false) según si la opción en cuestión es la seleccionada por defecto: document.miForm.miMenu.options[0].defaultSelected En el menú miMenu, la opción primera no está seleccionada por defecto y por lo tanto la sentencia anterior nos devolvería false. |
| selected | A
través de esta propiedad podemos saber
si una opción está seleccionada (por ejemplo por qué
un usuario ha clicado sobre ella). Es decir, nos devuelve un valor booleano
(true o false)
según si la opción en cuestión está seleccionada:
document.miForm.miMenu.options[0].selected
|
| text | A
través de esta propiedad podemos saber o modificar el texto asociado
a la opción en cuestión:
document.miForm.miMenu.options[0].text En el menú miMenu, la opción primera contiene el texto: "Texto Opción 1" y esto sería lo que nos daría la sentencia de arriba. |
| value | A
través de esta propiedad podemos saber o modificar el valor asociado
a la opción en cuestión:
document.miForm.miMenu.options[0].value En el menú miMenu, la opción primera contiene el valor: "valor_opcion1" y esto sería lo que nos daría la sentencia de arriba. |
Estas propiedades nos permiten hacer la gestión total de los menús y listas de formulario.
NOTA: Cabe tener en cuenta que en el tag select de form, también se puede utilizar el event handler onChange, con el cual podremos saber si un usuario ha cambiado la opción (u opciones) seleccionada.
|
Ejemplos de acceso y modificación de listas y menús de formulario Ejemplo 1 : Definir
un documento HTML con un formulario que contenga un menú. Utilizando
el event handler (visto en Eventos
del Browser)
onChange,
hacer que cada vez que el usuario seleccione una opción distinta,
se abra un alert()
mostrando el siguiente texto: donde debéis substituir las rayyas por los valores correspondientes a la opción seleccionada. Ejemplo 2 : Definir un documento HTML con un formulario que contenga una lista con las 5 vocales (todas 5 visibles), un botón y una lista vacía de 5 posiciones. Hacer que cuando el usuario pulse el botón, se transfieran las vocales seleccionadas en la primer lista a la segunda lista. |
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function notifica(){
cr = "\n"
i = document.miForm.miMenu.selectedIndex
alert("Has seleccionado la opción: " + i + cr +
"cuyo texto es: " + document.miForm.miMenu.options[i].text + cr +
"y su valor es: " + document.miForm.miMenu.options[i].value)
}
//-->
</script>
</head>
<body>
<form name="miForm">
<select name="miMenu" onChange="notifica()">
<option value="valor_opcion1">Texto Opción 1</option>
<option value="valor_opcion2">Texto Opción 2</option>
<option value="valor_opcion3">Texto Opción 3</option>
<option value="valor_opcion4">Texto Opción 4</option>
<option value="valor_opcion5">Texto Opción 5</option>
</select>
</form>
</body>
</html>
<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
function transfiere(){
l1 = document.miForm.miLista1 // Para ahorarnos escribir todo cada vez que
l2 = document.miForm.miLista2 // referenciamos las listas.
j = 0 // Para indexar miLista2 desde el principio
for(i = 0; i < l1.options.length; i++){
if(l1.options[i].selected){
l2.options[j].text = l1.options[i].text
l2.options[j].value = l1.options[i].value
j++
}
}
// Garantizar que el resto de posiciones de miLista2 queda vacía
for(;j < l2.options.length; j++){
l2.options[j].text = ""
l2.options[j].value = ""
}
}
//-->
</script>
</head>
<body>
<form name="miForm">
<select name="miLista1" size=5 multiple>
<option value="a">a</option>
<option value="e">e</option>
<option value="i">i</option>
<option value="o">o</option>
<option value="u">u</option>
</select>
<input type="button" name="Transferir" value="Transferir" onClick="transfiere()">
<select name="miLista2" size=5>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form>
</body>
</html>
Ejemplos de Gestión de Formularios
|
Ejemplo 1: Definir un documento HTML con una lista de 5 opciones y un área de texto. Las opciones deben ser cada una el título de algún tema (por ejemplo: La Vista, El Oido, El Tacto, El Olfato, El Gusto). Cada vez que el usuario seleccione un tema, un breve párrafo explicativo del tema deberá aparecer en el text area. Ejemplo 2: Definir un documento HTML con una lista de 5 opciones y una imágen en blanco. Las opciones deben ser cada una el título de algún tema (por ejemplo: La Vista, El Oido, El Tacto, El Olfato, El Gusto). Cada vez que el usuario seleccione un tema, la imagen deberá cambiar para mostrar una imagen que ilustre ese tema. |
Ejemplo 1:
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
resumenes = new Array(5)
resumenes[0] = "La Vista:\nLa vista es nuestro sentido prioritario al movernos por el mundo."
resumenes[1] = "El Oido:\nEl oido nos permite darnos cuenta de peligros que pueden provenir de direcciones en que no tenemos visión."
resumenes[2] = "El Tacto:\nEl tacto nos da referencias de las formas y texturas de los objetos que nos rodean."
resumenes[3] = "El Olfato:\nEl olfato nos previene de ingerir algún alimento que no esté en buen estado."
resumenes[4] = "El Gusto:\nEl gusto nos permite discernir entre los distintos alimentos de los cuales nos nutrimos."
function muestraResumen(){
f = document.miForm
f.miResumen.value = resumenes[f.miLista.selectedIndex]
}
//-->
</script>
</head>
<body>
<form name="miForm">
<select name="miLista" size=5 onChange="muestraResumen()">
<option value="">La Vista</option>
<option value="">El Oido</option>
<option value="">El Tacto</option>
<option value="">El Olfato</option>
<option value="">El Gusto</option>
</select>
<textarea name="miResumen" cols="20" rows="10" wrap="PHYSICAL"></textarea>
</form>
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
// Pre-carga de las imágenes
miImagenOriginal = new Image()
miImagenOriginal.src = "imagen1.gif"
misImagenes = new Array()
misImagenes[0] = new Image()
misImagenes[0].src = "imagen2.gif"
misImagenes[1] = new Image()
misImagenes[1].src = "imagen3.gif"
misImagenes[2] = new Image()
misImagenes[2].src = "imagen4.gif"
misImagenes[3] = new Image()
misImagenes[3].src = "imagen5.gif"
misImagenes[4] = new Image()
misImagenes[4].src = "imagen6.gif"
function muestraImagen(){
document.miImagen.src = misImagenes[document.miForm.miLista.selectedIndex].src
}
//-->
</script>
</head>
<body>
<form name="miForm">
<select name="miLista" size=5 onChange="muestraImagen()">
<option value="">La Vista</option>
<option value="">El Oido</option>
<option value="">El Tacto</option>
<option value="">El Olfato</option>
<option value="">El Gusto</option>
</select>
<img src="imagen1.gif" name="miImagen">
</form>
</body>
</html>
Ejercicios:
Escribir programas que hagan lo siguiente
|