Conocer el objeto form, que contiene todo un formulario con sus elementos. Ver las distintas maneras de acceder al objeto form mediante Javascript. Estudiar las propiedades y métodos de los objetos form.
El primer paso del manual de Formularios y Javascript consistirá en conocer el objeto form, sus elementos y propiedades. Más adelante iremos viendo algunas de las distintas formas del procesamiento de datos de los formularios mediante Javascript, así como su envío y recepción, etc.
El objeto form
Dentro del DOM (Document Object Model) de Javascript encontramos distintos objetos del navegador. Cada uno de los elementos que forman parte de una página tienen una representación en el DOM, entre otros el objeto form.
El objeto form depende directamente del objeto document y este a su vez, lo depende del objeto window, que es el principal del DOM.
Así como para crear una página en HTML se utilizan las etiquetas <html> Y </html>, lo mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas <form> y </form>.
<form>
Etiquetas de formulario...
</form>
Para poder disinguir a los formularios tenemos que identificarlos de alguna manera. Existen dos alternativas básicas para conseguirlo y dependiendo de la que usamemos tendremos que acceder al objeto formulario de una manera distinta. Vamos a estudiar cada una de estas formas por separado.
Acceso al formulario desde Javascript usando su identificador
Como alternativa más sencilla podemos usar un atributo id para asignar un identificador al formulario. Este identificador tiene que ser único para cualquier otro elemento de la página. Es decir, no puede haber dos etiquetas con el mismo identificador, ya sean formularios o cualquier otra etiqueta.
<form id="miformulario">
</form>
Dada esta posibilidad, podemos acceder al formulario de esta manera:
let objetoForm = document.getElementById('miformulario');
Acceso al formulario mediante su nombre
Con esta segunda posibilidad conseguimos el mismo resultado que la anterior, acceder al objeto form. Solamente que lo haremos a través del nombre que hemos indicado con el atributo "name".
<form name="nombre_del_formulario">
</form>
Desde el punto de vista del HTML hay una diferencia entre ponerle el id y el name. Mientras que el id debe de ser único para todas las etiquetas de la página, el name simplemente debe ser único para todas las etiquetas <form>.
De esta manera, la sintaxis básica para referirnos a un formulario sería:
let objetoFormulario = window.document.forms.nombre_del_formulario
En esa sentencia puede prescindirse de mencionar al objeto window. Ya que todo el DOM comienza por el objeto window, Javascript nos dispensa de utilizarlo. Así quedaría este código:
let objetoFormulario = document.forms.nombre_del_formulario
También podemos ahorrarnos la referencia a forms, ya que el navegador toma al formulario como un objeto en sí mismo.
let objetoFormulario = document.nombre_del_formulario
Por si fueran pocas posibilidades, el atributo name nos ofrece una manera adicional de acceder a los formularios, por medio del array de todos los formularios que hay en el objeto document.
let objetoFormulario = document.forms['nombre_del_formulario']
Ya sabemos que es absolutamente innecesario que existan tantas maneras de hacer lo mismo, pero Javascript es así. También puede ser innecesario que las mencionemos todas, pero lo cierto es que te viene bien conocerlas porque encontrarás código de distintos tipos en Internet y en la documentación en general y no queremos que te hagas un lío cuando encuentres una y otra forma... todo es equivalente en el fondo.
Iremos viendo la aplicación de este tipo de sintaxis con los próximos ejemplos y a medida que avancemos.
Propiedades principales del objeto form
Como todo objeto del DOM, el objeto form posee una cantidad de propiedades con las que podemos acceder a varias de sus características. Encontramos las siguientes propiedades:
name: es el nombre único del formulario.
action: es el lugar al cual se envía el formulario para ser procesado. El action define la URL a la cual se envía dicho formulario.
method: método de envío de los datos insertados en un formulario. El method puede ser:
- GET = envía los datos en una cadena "visible". Conveniente para enviar pocos datos.
- POST = envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos.
target: define la ventana o marco (frame) en la que se mostrarán o procesarán los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco, etc..)
Veamos un ejemplo de sintaxis básica de un formulario con HTML.
<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">
.......campos....
</form>
Métodos del objeto form
Ahora vamos a ver los métodos del objeto form, mediante los cuales podemos acceder a diversa funcionalidad sobre los formularios, para controlarlos mediante Javascript. El objeto form posee dos métodos:
submit: envía el formulario.
reset: restablece el formulario a los valores por defecto.
Estos métodos producen las mismas acciones que las que se obtendría al pulsar los típicos botones de formulario para submitirlo y para resetearlo.
<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">
.......campos....
<input type="submit" value="enviar formulario">
<input type="reset" value="borrar">
</form>
Ejemplo de aplicación con formularios y Javascript
Con lo que hemos aprendido hasta ahora vamos a realizar a continuación un par de ejemplos, donde veremos la utilización de la propiedad method y de los métodos submit y reset.
Method POST
El código....
<form name="datos" action="ejemplos/procesar.php" method="POST" target="_blank">
Escribe tu nombre: <input type="text" name="nombre">
<br>
<input type="submit" value="enviar formulario">
<br>
<input type="reset" value="borrar">
</form>
Si quisiéramos acceder a este formulario para enviarlo, sin que una persona tenga que pulsar el botón de submit, podríamos lanzar esta sentencia Javascript:
document.datos.submit();
Esta otra sentencia sería equivalente:
document.forms.datos.submit();
Method GET
El código....
<form name="datos1" action="ejemplos/procesar1.php" method="GET" target="_blank">
Escribe tu nombre: <input type="text" name="nombre">
<br>
<input type="submit" value="enviar formulario">
<br>
<input type="reset" value="borrar">
</form>
Si quisiéramos acceder a este formulario para resetearlo, sin que una persona tenga que pulsar el botón de reset, podríamos lanzar esta sentencia Javascript:
document.datos1.reset();
Esta otra sentencia sería equivalente:
document.forms['datos1'].reset();
Conclusión sobre el acceso a formularios mediante Javascript
En este artículo hemos visto diveras maneras de acceder a los formularios con Javascript y conseguir realizar sobre ellos operaciones sencillas como el envío de formularios y su reseteo.
En el próximo artículo aprenderemos más cosas sobre el objeto forms, que contiene una lista de todos los formularios de la página.
Eugenia Bahit
Analista Programadora LAMP y Scrum Coach