Propiedades y Eventos de Formularios HTML

Vamos a conocer las propiedades generales de los elementos de un formulario web y los eventos que utilizan. Para mayor comprensión recomiendo leer los materiales introducción a lenguaje HTML y etiquetas de formularios HTML publicados en los siguientes enlaces:

Propiedades y Eventos de Formularios HTML

Propiedades básicas de los elementos de formularios HTML

A nivel general se manejan cuatro propiedades básicas de formularios y cuatro eventos principales de interacción con el usuario. Veamos cuales son:

Propiedad 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.

Propiedad Form

Es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar .

document.getElementById("id_del_elemento").form

Propiedad name

Obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.

Propiedad 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 radiobutton no es muy útil, como se verá más adelante.

Este esquema muestra la gerarquía de objetos HTML que podemos usar dentro de un Form

Eventos para el manejo de formularios

Los cuatro eventos que más se utilizan en el procesamiento de formulario HTML son: Onclick, Onchange, Onfocus y Onblur, veamos cual es la función de cada uno.

Evento Onclick

Evento que se produce cuando se da clic sobre un elemento. Se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).

Evento 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>). 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 objeto ha perdido el foco".

Evento Onfocus

Evento que se produce cuando el usuario selecciona un elemento del formulario.

Evento Onblur

Evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. También funciona de modo que el objeto anterior "se ha perdido el foco".