Hace ya tiempo, cuando aprendí a construir formularios con HTML, me hacía mucha gracia que todos los formularios que veía por Internet tenían dos botones. El primero era el que realizaba el envío de la información, mientras que el segundo te borraba el contenido de todo el formulario.

Esta claro que no voy a cuestionar la utilidad de los dos botones, ya que útiles son. Pero quién no le ha dado al botón de borrar en vez de enviar, cuando realmente lo que quería era enviar y no borrar. Seguro que a todos nos ha pasado alguna vez y nos hemos visto en la tesitura de volver a introducir todos los datos.

En la especificación de XForms ¡han eliminado al componente “input type reset”¡..... Pero no del todo. La verdad es que ha dejado de ser un control y ha pasado a ser un “evento de interacción”..... ¿Cómo?

Intentare explicarlo... La idea es que los eventos de interacción sean los que correlacionen los eventos con el modelo de datos de XForms. Dentro de la categoría de eventos de interacción tenemos, además del "reset", "next" para cuando pasamos al siguiente control del formulario , "previous" cuando hacemos lo mismo, pero hacía atrás, "focus" para cuando queremos hacer foco en un determinado control,.....

Vale, pero yo quiero poner mi botón de toda la vida en el formulario,......

Lo primero que tenemos que hacer es construir un modelo de datos. Para este ejemplo tampoco nos vamos a inventar un mega-modelo. Hagamoslo sencillo:

<model id="mipersona">
   <instance>
<persona xmlns="">
       <nombre></nombre>
       <apellido></apellido>
       <edad></edad>
       <domicilio></domicilio>
     </persona>
   </instance>
</model>

Si os dais cuenta, los campos del modelo están vacíos. Y es que el evento de interacción reset no borra los campos, sino que lo que hace es volver a poner en el formulario el modelo inicial.

Vamos con el siguiente paso, construyamos el formulario. Para ello nos basamos en dos componentes sencillos: input y textarea. De ellos solo tienes que darte cuenta que para hacer referencia a un campo del modelo usan el atributo ref. El código nos quedaría algo así:

 
<input ref="/persona/nombre">
  <label>Persona: </label>
</input>
 
<h:br/>
<input ref="/persona/apellido">
  <label>Apellido: </label>
</input>
 
<h:br/>
<input ref="/persona/edad">
  <label>Edad: </label>
</input>
 
<h:br/>
 
<textarea ref="/persona/domicilio">
   <label>Domicilio: </label>
</textarea>

Y ahora llega lo más importante.... Nuestro botón de borrado... Para poner un botón tenemos que usar el componente trigger.

Dentro de este componente es donde pondremos nuestro evento de interacción. La etiqueta del elemento es reset y como atributos tendremos dos: el evento que lo activa que será DOMActivate . El evento DOMActivate viene a reflejar la acción por defecto sobre un control, en nuestro caso pulsar el botón. En el caso de que fuese una caja de texto, la acción por defecto sería pulsar "Intro".

El segundo atributo del reset es el modelo que tiene que resetear. Ya que podemos tener varios modelos en nuestra página.....

 
<trigger>
   <label>Borrar</label>
   <reset ev:event="DOMActivate" model="mipersona"/>
</trigger>

Bueno, al final, tampoco ha sido tan difícil....Similar Posts:

• Mi primer formulario XForms
• Saber que evento se ha producido
• Controlar el envío de un formulario con JavaScript
• Quitar el foco de un elemento
• Hola Mundo en ASP

XForms, otra tecnología X*. Un amigo mío dice, en broma, que toda tecnología que evoluciona el W3C le pega la X. Ya lo hizo al evolucionar su HTML al XHTML, las Querys al XQuery y claro está los formularios (Form) a XForms. Vamos, que podríamos decir que estamos delante de una verdadera generación X.

¿Qué es XForms?

XForms como reza su página del W3C es “the next generation of web forms”.... la nueva generación de formularios web. Y es que los formularios HTML se nos habían quedado pequeños y había que acometer dos cosas sobre ellos:

• Separar el modelo de datos del formulario y su diseño visual
• Dotar de mayor potencia a los formularios: funciones de trabajo sobre ellos, nuevos componentes visuales,...

De las dos cosas mencionadas, la primera es la más importante. Separación de los datos de la presentación. Es por ello que se crea un conjunto de componentes visuales que pueden ser usados dentro de un documento XHTML o cualquier otro documento XML.

Por otro lado se define el concepto de instancia de datos. Esto es un modelo de datos que viene a reflejar la estructura de datos que se va a manejar. Estos datos son los que realmente se van a intercambiar.

Estas dos cosas: controles de formulario y la instancia de datos son ligados mediante un procesador XForms el cual define como se envía y recibe datos.

Mi primer formulario

Pongámonos manos a la obra y construyamos nuestro primer formulario basado en XForms. El movimiento se demuestra andando....Lo primero que tenemos que saber es que vamos a construir un documento XHTML.

<h:html xmlns:h="http://www.w3.org/1999/xhtml">
 <h:head>
   <h:title>Mi primer formulario XForms</h:title>
 </h:head>
 <h:body>
 
 ...
 
 </h:body>
</h:html>

Si os fijáis en el código. El namespace escogido en mi ejemplo para el XHTML> es h. Esto nos permitirá diferenciarlo de las etiquetas XForms.

Lo siguiente que tenemos que hacer es incluir el namespace de XForms. Este, está definido en http://www.w3.org/2002/xforms

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
   xmlns="http://www.w3.org/2002/xforms">

En nuestro ejemplo vamos a poner un formulario de búsqueda. No nos vamos a complicar más la vida. Dentro de este formulario pondremos dos campos de entrada de texto y un botón que lance la búsqueda.

Lo más interesante de los XForms es que HA DESAPARECIDO LA ETIQUETA FORM.

Para añadir los campos de entrada de texto tenemos el elemento input:

 
<input>
  <label>Nombre:</label>
</input>
 
<h:br/>
<input>
 <label>Apellido:</label>
</input>
 

Dentro de la etiqueta input podemos encontrar dos elementos

• Label: Para indicar el nombre que se antepondrá al campo de entrada
• Hint: Que es una etiqueta de texto emergente que nos servirá de aviso.

Para añadir el botón de búsqueda tendremos que trabajar con el elemento submit. Este elemento tiene asociado un atributo que es submission, el cual enlazará con una acción de envío.

<submit submission="busqueda">
  <label>Buscar</label>
</submit>

Enlazando el formulario con el modelo de datos

Como hemos dicho en la introducción. XForms separa los datos de la presentación. El modelo de dato se define dentro de la etiqueta model. Y un modelo contendrá una instancia del mismo (definida por el elemento instance), la cual contendrá los datos.

Veamos como quedaría nuestro formulario con el nombre y apellido como modelo:

<model>
  <instance>
    <data xmlns="">
      <nombre>Victor</nombre>
      <apellido>Cuervo</apellido>
    </data>
  </instance>
</model>

Si queremos hacer referencia a algún elemento del modelo desde los controles visuales lo haremos mediante el atributo ref. Así nuestros componentes visuales quedarían de la siguiente forma:

 
<input ref="nombre">
 <label>Nombre:</label>
</input>
 
<h:br/>
<input ref="apellido">
 <label>Apellido:</label>
</input>
 

Dentro del modelo también tendremos la acción desencadenada por el componente gráfico submit. El elemento que tiene la acción es submission.

<submission action="http://example.com/buscar" method="post" id="buscar"/>

Este elemento tiene múltiples atributos, pero entre ellos destacamos tres:

• action, que define la URI donde se enviarán los datos.
• method, que indica que tipo de protocolo se va a utilizar para la serialización de datos: post, get,...
• id, identificador que lo hace único y que será usado por el elemento submit para identificar la acción de búsqueda a usar.

Visualizar nuestro trabajo: plug-in para Mozilla

Solo nos quedará por guardar nuestro ejemplo como .xhtml y probarlo.

Para probar el XForms con Mozilla y FireFox hay que descargarse un plug-in https://addons.mozilla.org/firefox/824/ que nos servirá para nuestros ejemplos.

Otros interpretes de XForms están disponibles en http://www.w3.org/MarkUp/Forms/#implementationsSimilar Posts:

• Borrado de campos en XForms
• Posicionarse en el primer elemento de un formulario
• Boton con imagen de fondo en CSS
• Deshabilitar formulario con Prototype
• Botones con imagenes en XForms

Si echamos la vista atrás podemos recordar que con los formularios HTML podíamos tener campos de texto de tipo "image". Estos campos de texto no eran más que una imagen sobre la que se podía pinchar. Luego aparecio la etiqueta button que ya permitía anidar otros elementos. Mediante CSS se daba un nuevo salto y las propiedades permitían jugar con el color e imagen de fondo del botón. Con XForms vamos un paso más allá y aquí se pueden construir botones con imágenes, mediante la etiqueta IMG de HTML. Algo parecido al elemento button de HTML. Y todo de una forma muy sencilla.

Lo primero que tenemos que ver es cómo construir un botón. Para ello nos valemos de la etiqueta trigger. La verdad es que esto ha sido un cambio bastante sustancial con respecto a los button del HTML

Anidada a la etiqueta trigger utilizaremos label para indicar el texto que va sobre el botón. Teniendo un código similar al siguiente:

 
<trigger>
   <label>Mi boton</label>
</trigger>

Incrustar una imagen como elemento del botón será un procedimiento muy sencillo, ya que bastará con utilizar la etiqueta IMG, referenciando a la imagen que queramos usar, como valor del label del botón

 
<trigger>
   <label><h:img src="documento.gif"/></label>
</trigger>

Como se puede observar, algo muy sencillo de codificar y muy útil en cuanto al diseño. Toda una novedad de XForms.

Veamos como sería el código completo:

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
   xmlns="http://www.w3.org/2002/xforms">
<h:head>
 <h:title>Mi primer formulario XForms</h:title>
</h:head>
<h:body>
 
 <h:p>
<trigger>
   <label><h:img src="documento.gif"/></label>
  </trigger>
<trigger>
   <label>Mi boton</label>
  </trigger>
 
 </h:p>
</h:body>
</h:html>

FireFox ya da soporte a la especificación de XForms, aunque, que yo sepa incompleto. Puedes encontrar otros interpretes de XForms en http://www.w3.org/MarkUp/Forms/#implementationsSimilar Posts:

• Mi primer formulario XForms
• Crear elementos HTML con JavaScript
• Todos los campos del formulario obligatorios
• Borrado de campos en XForms
• Poner un fondo en mi página web