Trabajo con formularios en Javascript

  • Por
Para continuar vamos a ver una serie de capítulos enfocados a aprender a trabajar con los formularios. Ahora veremos como acceder a los formularios y sus elementos.

Para continuar vamos a ver una serie de capítulos enfocados a aprender a trabajar con los formularios, acceder a sus elementos para controlar sus valores y actualizarlos.

El objeto form depende en la jerarquía de objetos del objeto document. En un objeto form podemos encontrar algunos métodos y propiedades, pero lo más destacado que podremos encontrar son cada uno de los elementos del formulario. Es decir, de un formulario dependen todos los elementos que hay dentro, como pueden ser campos de texto, cajas de selección, áreas de texto, botones de radio, etc.

Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas.

  1. A partir de su nombre, asignado con el atributo NAME de HTML.
  2. Mediante la matriz de formularios del objeto document, con el índice del formulario al que queremos acceder.

Para este formulario

<FORM name="f1"> 
<INPUT type=text name=campo1> 
<INPUT type=text name=campo2> 
</FORM>

Podremos acceder con su nombre de esta manera.

document.f1

O con su índice, si suponemos que es el primero de la página.

document.forms[0]

De similar manera accedemos a los elementos de un formulario, que dependen del objeto form.

  1. A partir del nombre del objeto asignado con el atributo NAME de HTML.
  2. Mediante la matriz de elementos del objeto form, con el índice del elemento al que queremos acceder.

Podríamos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haríamos así.

document.f1.campo1

o a partir del array de elementos.

document.f1.elements[0] (utilizamos el índice 0 porque es el primer elemento y en Javascript los arrays empiezan por 0.)

Si deseamos acceder al segundo campo del formulario escribiríamos una de estas dos cosas:

document.f1.campo2 
document.f1.elements[1]

recordamos que también podemos acceder a un fomulario por el array de forms, indicando el índice del formulario al que acceder. De este modo, el acceso al campo2 sería el siguiente:

document.forms[0].campo2 
document.forms[0].elements[1]

En estos casos hemos supuesto que este formulario es el primero que hay escrito en el código HTML, por eso accedemos a él con el índice 0.

Esperamos que haya quedado claro el acceso a formularios y sus campos. Pasaremos entonces, sin más, a un ejemplo para practicar todo esto.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Mahily

23/9/2004
Hola! hay alguna función q me permita conocer el número total de "elements" de un formulario?
Gracias, muy bueno el manual.

alan

05/3/2011
filtrar solo checkbox o mas general por typo ya sea de texto o radio buttons etc
como hacer para q solo mmm cuente de todos los elementos solo los checkbos ?

gaboforrez

17/3/2011
muchas gracias
de verdad gracias de tanta información que hay en internet los primeros en un buen rato de búsqueda que colocan algo serio y correcto muy amables adelante muy agradecido

Nacho007

09/8/2012
Trabajo con formularios en Javascript
muy buen aporte!!!