Saltar la navegación

1.1.- Formas de selección del objeto Form.

Lupa sobre una ventana.
Everaldo Coelho (GNU/GPL)


Dentro de un documento tendremos varias formas de selección de un formulario.

Si partimos del siguiente ejemplo:

<div  id="menulateral">
     <form  id="contactar" name="contactar" action="...">...</form>
</div>

Tendremos los siguientes métodos de selección del objeto Form en el documento:



Método 1

A través del método getElementById() del DOM, nos permite acceder a un objeto a través de su atributo ID. Tendremos que tener la precaución de asignar id únicos a nuestros objetos, para evitar que tengamos objetos con id repetidos.

Ejemplo:

let formulario = document.getElementById("contactar");

Método 2

A través del método getElementsByTagName() del DOM, el cuál nos permite acceder a un objeto a través de la etiqueta HTML que queramos. Por ejemplo para acceder a los objetos con etiqueta form haremos:

let formularios = document.getElementsByTagName("form");
let primerFormulario = formularios[0];     // primer formulario del documento

o también todo en una única línea:

let primerFormulario = document.getElementsByTagName("form")[0] ;

Otra posibilidad interesante que te permite el método anterior, es la de buscar objetos con un padre determinado, por ejemplo:

let menu = document.getElementById("menulateral");
let formularios = menu.getElementsByTagName("form");       // formularios contenidos en el menu lateral
let primerFormulario =  formularios[0];                     // primer formulario en el menú lateral

Método 3

Otro método puede ser a través de la colección forms[] del objeto document. Esta colección es un array, que contiene la referencia a todos los formularios que tenemos en nuestro documento.

Por ejemplo:

let formularios = document.forms;        // la referencia a todos los formularios del documento
let miFormulario = formularios[0];       // primer formulario del documento

o bien:

let miFormulario = document.forms[0];     // primer formulario del documento

o bien:

let miFormulario = formularios["contactar"];       // referenciamos al formulario con name "contactar"