Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Curso de JavaScript :

Capítulo 6: Creación de formularios interactivos

Acceso a los formularios de una página
Acceso a los elementos de un formulario
Métodos, propiedades y eventos de los elementos de un formulario
Ejemplo final: calculadora

1. Acceso a los formularios de una pagina

Los formularios y campos de formulario contenidos en una página pueden ser accedidos desde un script JavaScript. El array forms almacena un elemento por cada formulario que aparece en la página, en el orden en que estén en el
código fuente. De este modo, en el ejemplo siguiente

<FORM METHOD=POST NAME="Formu">

para acceder al formulario, estas tres formas son equivalentes:

document.forms[0] (primer formulario)
document.forms["Formu"]
document.Formu

1.1. Propiedades del objeto formulario

Propiedad	Descripción
action	Cadena que contiene el valor del atributo ACTION del tag FORM
elements	Array que contiene una entrada por cada elemento en el formulario (como campos de texto, listas de selección, botones,...)
encoding	Cadena que contiene el tipo MIME utilizado para codificar los contenidos del formulario que se envían al servidor. Refleja el atributo ENCTYPE del tag FORM
name	Cadena que contiene el valor del atributo NAME del tag FORM
target	Cadena que contiene el nombre de la ventana objetivo del submit (ventana en la que se publican los resultados)
length	Refleja el número de elementos del formulario
method	Cadena que contiene el valor del atributo METHOD del tag FORM

1.2. Métodos del objeto form

Método	Descripción
handleEvent	Invoca el manejador del evento especificado
reset	Simula la pulsación del botón del ratón sobre un botón de reset del formulario
submit	Envía el formulario

Ejemplo:

<HTML>
<HEAD><TITLE>Ejemplo de metodo submit()</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<FORM METHOD=POST onSubmit="alert('¡Respuesta correcta!'); return false">
¿Cuánto vale 10 * 10?
<INPUT TYPE="text" NAME="respuesta" onChange="CompruebaValor(this.form)">
</FORM>
</BODY>
</HTML>

1.3. Eventos de formulario

Evento	Descripción
onReset	Captura la pulsación del botón reset
onSubmit	Captura la pulsación del botón submit

2. Acceso a los elementos de un formulario

Para acceder a los elementos de un formulario desde un script, se utiliza el array elements. Este array contiene una entrada para cada objeto del formulario (button, checkbox, fileupload, hidden, password, radio, reset, select, submit, text, y textarea), en el orden en que aparecen el el código fuente.

Por ejemplo, si un formulario de nombre MiFormu tiene un campo de texto (text) y dos cuadros de selección (checkbox), podemos acceder a ellos con los elementos:

MiFormu.elements[0]
MiFormu.elements[1]
MiFormu.elements[2]

Otra posibilidad es utilizar el nombre del elemento al cual se desea acceder. Así, si el campo de texto del ejemplo anterior se llama MiTexto, las siguientes opciones son equivalentes:

MiFormu.elements[0]
MiFormu.elements["MiTexto"]
MiFormu.MiTexto

Ejemplo: utilización del array elements en una tabla de multiplicar.

<HTML>
<HEAD>
<TITLE>Tabla de multiplicar</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<FORM METHOD=POST>
Number: <INPUT TYPE=text NAME="Numero" VALUE=1 onChange="Calcula(this.form);"><BR>
x 1: <INPUT TYPE=text NAME="1" VALUE=1 onFocus="blur();"><BR>
x 2: <INPUT TYPE=text NAME="2" VALUE=2 onFocus="blur();"><BR>
x 3: <INPUT TYPE=text NAME="3" VALUE=3 onFocus="blur();"><BR>
x 4: <INPUT TYPE=text NAME="4" VALUE=4 onFocus="blur();"><BR>
x 5: <INPUT TYPE=text NAME="5" VALUE=5 onFocus="blur();"><BR>
x 6: <INPUT TYPE=text NAME="6" VALUE=6 onFocus="blur();"><BR>
x 7: <INPUT TYPE=text NAME="7" VALUE=7 onFocus="blur();"><BR>
x 8: <INPUT TYPE=text NAME="8" VALUE=8 onFocus="blur();"><BR>
x 9: <INPUT TYPE=text NAME="9" VALUE=9 onFocus="blur();"><BR>
x 10: <INPUT TYPE=text NAME="10" VALUE=10 onFocus="this.blur();"><BR>

<INPUT TYPE=button NAME="Calcula" VALUE="Calcula" onClick="Calcula(this.form);">
</FORM>
</BODY>
</HTML>

La gran ventaja del array elements es la simplificación del código mediante la utilización de bucles y el acceso a los elementos del formulario mediante índices. Por ejemplo, la función Calcula() del ejemplo anterior puede escribirse de la siguiente forma:

function Calcula(Formu) {
   var Numero = Formu.Numero.value
   for(num = 1; num <= 10; num++) {
      Formu.elements[num].value = Numero * num
   }
}

3. Métodos, propiedades y eventos de los elementos de un formulario

Cada elemento de un formulario posee propiedades y métodos que pueden utilizarse en los scripts para actuar sobre el formulario. A continuación vamos a describir los más importantes.

3.1. Cuadro de selección (checkbox)

Propiedad	Descripción
checked	Indica el estado actual del cuadro de selección
defaultChecked	Indica el estado por defecto del elemento
name	Indica el nombre del elemento tal y como está especificado en el tag INPUT
value	Indica el valor el elemento tal y como está especificado en el tag INPUT
Método	Descripción
click()	Simula la pulsación del botón del ratón sobre el cuadro de selección
Evento	Descripción
onClick	Captura la pulsación del botón del ratón sobre el cuadro de selección

3.2. Botón de selección (radio)

Es similar al cuadro de selección (checkbox) con la diferencia de que varios elementos de este tipo pueden agruparse con un solo nombre de modo que sólo uno de ellos podrá estar seleccionado.

Propiedad	Descripción
checked	Indica el estado actual del botón de selección
defaultChecked	Indica el estado por defecto del elemento
name	Indica el nombre del elemento tal y como está especificado en el tag INPUT
value	Indica el valor del elemento tal y como está especificado en el tag INPUT
index	Indica el índice del botón de selección actualmente seleccionado en el grupo
length	Indica el número de botones de selección en el grupo
Método	Descripción
click()	Simula la pulsación del botón del ratón sobre el botón de selección
Evento	Descripción
onClick	Captura la pulsación del botón del ratón sobre el botón de selección

Ejemplo:

<HTML>
<HEAD>
<TITLE>Ejemplo de cuadro de seleccion (checkbox)</TITLE>
<SCRIPT>

</SCRIPT>
</HEAD>

<BODY>
<FORM METHOD=POST>
<P>Valor:<BR>
<INPUT TYPE="text" NAME="entrada" VALUE=0 onChange="Calcula(this.form, this.name);">
<P>Acción:<BR>
<INPUT TYPE="radio" NAME="BotonAccion" VALUE="cuadrado"> Al cuadrado<BR>
<INPUT TYPE="radio" NAME="BotonAccion" VALUE="raiz2"> Raiz cuadrada<BR>
<P>Resultado:<BR>
<INPUT TYPE=text NAME="resultado" VALUE=0>
</FORM>
</BODY>
</HTML>

3.3. Cuadro de texto (text)

Propiedad	Descripción
defaultValue	Indica el valor por defecto del elemento tal y como está especificado en el tag INPUT
name	Indica el nombre del elemento tal y como está especificado en el tag INPUT
value	Indica el valor actual del elemento
Método	Descripción
focus()	Da el foco al elemento (convierte el cuadro de texto en la zona activa actual)
blur()	Quita el foco del elemento
select()	Selecciona el texto actual del cuadro de texto
Evento	Descripción
onChange	Captura el cambio de valor del campo de texto
onFocus	Captura la recuperación del foco por parte del cuadro de texto
onBlur	Captura la pérdida del foco
onSelect	Captura la selección del texto

3.4. Lista de selección (select)

Propiedad	Descripción
options	Array que contiene una entrada por cada elemento de la lista de selección
selectedIndex	Da el índice de la opción de la lista seleccionada actualmente
options[n]. value	Indica el valor del elemento n de la lista, tal y como está especificado en el tag OPTION
options[n]. text	Contiene la cadena de texto que representa la opción n de la lista
options[n]. selected	Indica si la opción n está actualmente seleccionada
options[n]. defaultSelected	Indica si la opción n es la seleccionada por defecto
Método	Descripción
focus()	Da el foco al elemento
blur()	Quita el foco del elemento
Evento	Descripción
onChange	Captura el cambio de selección en la lista
onFocus	Captura la recuperación del foco por parte de la lista de selección
onBlur	Captura la pérdida del foco

Como ejemplo, dado el siguiente código HTML:

<SELECT NAME="Ejemplo" onFocus="Ver()">
<OPTION SELECTED VALUE="Opción 1">1
<OPTION VALUE="Opción 2">2
<OPTION VALUE="Opción 3">3
</SELECT>

las propiedades de la lista de selección se acceden como se muestra, tomando los valores que aparecen a la derecha:

Ejemplo.options[1].value = "Opción 2"
Ejemplo.options[2].text = "3"
Ejemplo.selectedIndex = 0
Ejemplo.options[0].defaultSelected = true
Ejemplo.options[1].selected = false

3.5. Area de texto (textarea)

Posee las propiedades defaultValue, name y value, con el mismo significado que para el cuadro de texto. Los métodos focus(), blur() y select() pueden utilizarse con este elemento, al igual que los eventos onFocus, onBlur y onSelect.

3.6. Botones submit y reset

Los botones submit y reset poseen las propiedades name y value, puediendo utilizarse con ellos el método click() y el evento onClick().

El botón submit posee un método y un evento específicos: el método submit() y el evento onSubmit. El método submit() realiza el emisión del formulario (es equivalente a pulsar el botón submit). El evento onSubmit se produce cuando se envía el formulario, permitiento realizar operaciones con los datos del formulario antes de realizar el envío (por ejemplo, validación de campos).

4. Ejemplo final: calculadora

<HTML>
<HEAD>
<TITLE>Calculadora</TITLE>
<SCRIPT>

</SCRIPT>
</HEAD>

<BODY>
<FORM>
<TABLE BORDER=1>
<TR><TD COLSPAN=4><INPUT TYPE=text NAME=display VALUE="" onFocus="this.blur();"></TD></TR>
<TR>
<TD><INPUT TYPE=button NAME="7" VALUE=" 7 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="8" VALUE=" 8 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="9" VALUE=" 9 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="+" VALUE=" + " onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button NAME="4" VALUE=" 4 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="5" VALUE=" 5 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="6" VALUE=" 6 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="-" VALUE=" - " onClick="Calcula(this);"></TD>
</TR>
<TR>
<TD><INPUT TYPE=button NAME="1" VALUE=" 1 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="2" VALUE=" 2 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="3" VALUE=" 3 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="*" VALUE=" * " onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button NAME="0" VALUE=" 0 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="C" VALUE=" C " onClick="Limpiar(this.form);"></TD>
<TD><INPUT TYPE=button NAME="CE" VALUE="CE" onClick="BorraNumero(this.form);"></TD>
<TD><INPUT TYPE=button NAME="/" VALUE=" / " onClick="Calcula(this);"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Obsérvese cómo se referencia un formulario a partir de un elemento del mismo: var Formu = Digito.form permite obtener el formulario que contiene el boton Digito.

Tutorial de JavaScript