HTMLpointHTMLpoint HTMLpoint.com


 Gestionar los formularios con DHTML 2/3

 por Massimiliano Valente

La solución más obvia a este problema está en insertar un formulario en cada Layer. Esta decisión a su vez hace surgir, sin embargo, la cuestión de cómo reunir en un único formulario los datos procedentes de módulos diferentes. Una de las características prinicipales de los formularios HTML es justamente la de evitar la inserción de módulos dentro de otros módulos.

HTML dinámico permite, mediante la inserción de código JavaScript, eliminar el problema mediante la creación de un formulario principal (mainForm) que recopila y gestiona los valores procedentes de otros módulos.

El aspecto, al anchura, la altura y la colocación de los diversos Layer son gestionados por las hojas de estilo presentes entre las marcas <HEAD>:

<STYLE TYPE="text/css">

<!--

#nomeLyr {position:absolute; left:100px; top:100px; width:400px; visibility:visible; font-size:14px; font-family:arial; font-weight:bold; color:blue;}


donde los valores numéricos están expresados en píxel (px) y los layer subdivididos por nombre: #nombreLyr, #portadaLyr, #valoraciónLyr, #comunicacionesLyr, #mejorasLyr y #comentariosLyr.

"Left" indica la distancia del margen izquierdo de la página, mientras "Top" indica la distancia del margen superior. "Width" determina la anchura de los distintos Layer y "visibility:visible" qué Layer debe quedar expuesto en el momento de cargarse la página. El código sucesivo gestiona la formatación del texto según las reglas de las hojas de estilo. La referencia al interno del documento tiene lugar mediante la marca <DIV ID=#nombreLyr>, compatible con Netscape e IE (este último no implementa la marca <LAYER>, reconocida exclusivamente por Netscape).

El modelo de objetos de Netscape tiene acceso a un número limitado de elementos respecto a IE. El navegador de Microsoft, por ejemplo, vuelve programable el elemento DIV y su contenido en cualquier parte del documento esté colocado, sin que sea necesario acceder al modelo de objetos. En Navigator 4, por el contrario, el estilo debe modificar el modelo para acceder a los elementos. Esto tiene lugar mediante la exposición de un nuevo documento dentro de los Layer.

Así mientras IE accede a todos los elementos del documento, Netscape accede tan sólo a los expuestos dentro de la colección de Layer:
Si se elimina la información relativa a la colocación de la marca DIV, el objeto layer no está creado y se tiene acceso al documento sólo desde su nivel más alto.

La función "adelante":
gestiona el script que permite avanzar en la visualización progresiva de los Layer.

Las funciones en JavaScript son instrucciones especiales que contienen otras instrucciones para ejecutar cuando sean invocaas por un gestor de eventos.

La función:

function sendForm()

es invocada cuando se pulsa el botón "enviar" en el último layer.

Mediante el objeto "Form" es posible gestionar cada uno de los controles y enviar o reimpostar el formulario. Entre estos objetos y el documento hay una relación especial que permite acceder de modo directo a los módulos.

Es posible insertar texto e imágenes dentro de los distintos Layer sin ninguna dificultad de interpretación por parte de IE. Netscape, por el contrario, revela algunos problemas en la gestión de imágenes animadas que crean una especie de superposición.

Las nuevas recomendaciones de HTML 4.0 permiten gestionar de manera interactiva los formularios sobre todo su aspecto. Las hojas de estilo permiten formatear, esconder y mostrar el contenido de los distintos campos de un formulario sin demasiadas dificultades. El modelo de objetos adoptado por IE permite realizar estas operaciones de manera simple e intuitiva y, por este motivo, estos ejemplos son compatibles exclusivamente con el navegador Microsoft. Si bien considerado individualmente, el código que sigue puede adaptarse de modo intuitivo a otros documentos.

Gracias a las hojas de estilo (CSS1) es, por ejemplo, posible esconder los campos de un formulario para exponerlos sucesivamente al verificarse eventos generados por los usuarios:
Muestra el ejemplo práctico


Se trata de controles intrínsecos que se envían junto al formulario.

El atributo "display" de las hojas de estilo controla, según las especificaciones oficiales de CSS1, el comportamiento general de los otros elementos más que especificar directamente su aspecto.En particular, identifica cuando se debe usar un elemento asociado a un estilo. Cuatro palabras clave identifican su comportamiento:

Inline: crea un nuevo box en la misma línea de los elementos de texto adyacentes;

Block: un nuevo box creadoen posición relativa a los elementos que lo circundan

List-item: permite añadir marcadores de elementos de elenco;

None: inhabilita a la visualización del elemento.

HTML no prevé funcione predeterminadas para la convalidación de los formularios. Para colmar esta laguna, interviene el lenguaje de scripting que, de esta manera, evita que dicha actividad sea competencia exclusiva del servidor. La convalidación inmediata es un excelente instrumento para filtrar el INPUT ddel usuario.

El siguiente código, por ejemplo, convalida el INPUT asignando a los campos rellenados un valor diverso del asignado a los dejados en blanco:

Muestra el ejemplo práctico


El atributo "fondo" asegura que se introduzca un valor en la casilla TEXT y demuestra cómo extender el texto intrínseco en los formularios HTML.

La hoja de estilo asigna el color
El elemento TEXT crea una casilla de texto con línea simple, mientras que SELECT permite visualizar un elenco de opciones.


  Vuelve a principio de página