Para ilustrar un poco el trabajo con formularios, vamos a realizar un ejemplo práctico. Puede que algunas cosas que vamos a tratar queden un poco en el aire porque no se hayan explicado con detenimiento antes, pero seguro que nos sirve para enterarnos de cómo se trabaja con formularios y las posibilidadedes que tenemos.

Ejemplo calculadora sencilla

En este ejemplo vamos a construir una calculadora, aunque bastante sencilla, que permita realizar las operaciones básicas. Para hacer la calculadora vamos a realizar un formulario en el que vamos a colocar tres campos de texto, los dos primeros para los operandos y un tercero para el resultado. Además habrán unos botones para hacer las operaciones básicas.

El formulario de la calculadora se puede ver aquí.

<form name="calc"> 
<input type="Text" name="operando1" value="0" size="12"> 
<br> 
<input type="Text" name="operando2" value="0" size="12"> 
<br> 
<input type="Button" name="" value=" + " onclick="calcula('+')"> 
<input type="Button" name="" value=" - " onclick="calcula('-')"> 
<input type="Button" name="" value=" X " onclick="calcula('*')"> 
<input type="Button" name="" value=" / " onclick="calcula('/')"> 
<br> 
<input type="Text" name="resultado" value="0" size="12"> 
</form>

Mediante una función vamos a acceder a los campos del formulario para recoger los operandos en dos variables. Los campos de texto tienen una propiedad llamada value que es donde podemos obtener lo que tienen escrito en ese momento. Mas tarde nos ayudaremos de la función eval() para realizar la operación. Pondremos por último el resultado en el campo de texto creado en tercer lugar, utilizando también la propiedad value del campo de texto.

A la función que realiza el cálculo (que podemos ver a continuación) la llamamos apretando los botones de cada una de las operaciones. Dichos botones se pueden ver en el formulario y contienen un atributo onclick que sirve para especificar las sentencias Javascript que deseamos que se ejecuten cuando el usuario pulse sobre él. En este caso, la sentencia a ejecutar es una llamada a la función calcula() pasando como parámetro el símbolo u operador de la operación que deseamos realizar.

Script con la función calcula()

<script> 
function calcula(operacion){ 
   	var operando1 = document.calc.operando1.value 
   	var operando2 = document.calc.operando2.value 
   	var result = eval(operando1 + operacion + operando2) 
   	document.calc.resultado.value = result 
} 
</script>

La función eval(), recordamos, que recibía un string y lo ejecutaba como una sentencia Javascript. En este caso va a recibir un número que concatenado a una operación y otro número será siempre una expresión aritmética que eval() solucionará perfectamente.

Podemos ver el ejemplo de la calculadora en funcionamiento.

El acceso a otros elementos de los formularios se hace de manera parecida en cuanto respecta a la jerarquía de objetos, aunque como cada elemento tiene sus particularidades las cosas que podremos hacer con ellos diferirán un poco. Lo veremos un poco más adelante.