forms y que contiene la
referencia a todos los formularios de la página.Para acceder al array forms, se utiliza el objeto document, por lo que document.forms es el array que contiene todos los formularios de la página. Como se trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucción accede al primer formulario de la página:
document.forms[0];
Además del array de formularios, el navegador crea
automáticamente un array llamado elements por cada uno de los
formularios de la página. Cada array elements contiene
la referencia a todos los elementos (cuadros de texto, botones, listas
desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la
siguiente instrucción obtiene el primer elemento del primer formulario de la
página:
document.forms[0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El
siguiente ejemplo muestra cómo obtener directamente el último elemento del
primer formulario de la página:
document.forms[0].elements
Aunque esta forma de
acceder a los formularios es rápida y sencilla, tiene un inconveniente muy
grave. ¿Qué sucede si cambia el diseño de la página y en el código HTML se
cambia el orden de los formularios originales o se añaden nuevos formularios?
El problema es que “el primer formulario de la página” ahora podría ser otro
formulario diferente al que espera la aplicación.
En un entorno tan
cambiante como el diseño web, es muy difícil confiar en que el orden de los
formularios se mantenga estable en una página web. Por este motivo, siempre
debería evitarse el acceso a los formularios de una página mediante el array
document.forms.
Una forma de evitar
los problemas del método anterior consiste en acceder a los formularios de una
página a través de su nombre (atributo name) o a través de su atributo id. El
objeto documentpermite acceder directamente a cualquier formulario mediante su
atributo name:0
var
formularioPrincipal = document.formulario;
var
formularioSecundario = document.otro_formulario;
<form name="formulario" >
</form>
<form name="otro_formulario" >
</form>
Accediendo de esta
forma a los formularios de la página, el script funciona correctamente aunque
se reordenen los formularios o se añadan nuevos formularios a la página. Los
elementos de los formularios también se pueden acceder directamente mediante su
atributo name:
var
formularioPrincipal = document.formulario;
var primerElemento =
document.formulario.elemento;
<form name="formulario">
<input
type="text" name="elemento" />
</form>
Obviamente, también
se puede acceder a los formularios y a sus elementos utilizando las funciones
DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual
funcióndocument.getElementById() para acceder de forma directa a un formulario
y a uno de sus elementos:
var
formularioPrincipal = document.getElementById("formulario");
var primerElemento =
document.getElementById("elemento");
<form name="formulario"
id="formulario" >
<input
type="text" name="elemento" id="elemento" />
</form>
Independientemente
del método utilizado para obtener la referencia a un elemento de formulario,
cada elemento dispone de las siguientes propiedades útiles para el desarrollo
de las aplicaciones:
- type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text,button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea.
- form: es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizardocument.getElementById("id_del_elemento").for
- name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.
- Value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y radiobuttonno es muy útil, como se verá más adelante.
- onclick: evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).
- onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que “el otro campo de formulario ha perdido el foco”.
- onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario,0
- onblur: evento complementario de onfocus, ya que se produce cuando el usuario hadeseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior “ha perdido el foco”.
No hay comentarios:
Publicar un comentario