Guía Breve de XForms

¿Qué es XForms?

Es un nuevo lenguaje de etiquetado para formularios Web, diseñado para ser el sustituto de los formularios tradicionales HTML , y que va a permitir a los desarrolladores de formularios Web distinguir entre el propósito del formulario y su presentación. Esta separación clara entre contenido y presentación ofrece grandes ventajas en términos de:

¿Para qué sirve?

XForms puede hacer todo lo que hacen los formularios HTML, pero además permite:

¿Cómo funciona?

XForms está compuesto por secciones separadas que describen lo que hace el formulario y cómo se va a mostrar. Los formularios tradicionales de HTML no separaban el propósito de la presentación, sin embargo XForms sí que lo hace a través de esas secciones separadas. Las tres partes en las que se divide un formulario XForms son el Modelo XForms, los datos de la instancia y la interfaz del usuario. Esto proporciona una gran flexibilidad en las opciones de presentación.

En un formulario con XForms los detalles de los valores recogidos y los detalles de la forma de enviar esos valores se recoge en un encabezado del documento, en concreto dentro de un elemento llamado model (modelo). En el cuerpo del documento sólo aparecerán los controles. Por lo que el contenido del encabezado sería:

<model>
   <submission action="http://ejemplo.com/buscar" method="get" id="s"/>
</model>

En este trozo de código vemos que el elemento <form>, ya no es necesario. Los controles en el cuerpo del documento aparecen de la siguiente forma:

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
        xmlns="http://www.w3.org/2002/xforms">
 <h:head>
   <h:title>Buscar</h:title>
   <model>
     <submission action="http://ejemplo.com/buscar" method="get" id="s"/>
   </model>
 </h:head>
 <h:body>
   <h:p>
     <input ref="q"><label>Buscar</label></input>
     <submit submission="s"><label>Enviar</label></submit>
   </h:p>
 </h:body>
</h:html>

El siguiente gráfico muestra cómo XForms Model (Modelo XForms), tiene la capacidad de trabajar con gran variedad de estándares o interfaces de usuario.

Capacidad del Modelo XForms para conectarse a diferentes interfaces

Figura 1 - Modelo XForms

La Interfaz de usuario de XForms proporciona un conjunto estándar de controles visuales con el objetivo de reemplazar los controles del actual XHTML. Estos controles se usan directamente en XHTML y en otros documentos XML, como SVG.

Los formularios de XForms recogen datos, lo que se expresa como instance data, datos de instancia XML. XForms Model se encarga de describir la estructura de esos datos de instancia, lo que muestra un intercambio estructurado de datos.

<model>
  <instance><data xmlns=""><q/></data></instance>
  <submission action="http://ejemplo.com/buscar" method="get" id="com"/>
  <submission action="http://ejemplo.org/buscar" method="get" id="org"/>
</model>

Finalmente, tiene que existir un canal por el que los datos de instancias se muevan hacia y desde un procesador XForms. Para ello, el Protocolo de envío de XForms define la forma en la que XForms envía y recibe datos, incluyendo la capacidad de cancelar y reanudar la finalización de un formulario.

Imagen del Modelo XForms y de la Interfaz de Usuario XForms conectados

Figura 2 - Visión global de XForms

Ejemplos

A continuación se muestran fragmentos de código en HTML y XForms para un formulario muy sencillo de comercio electrónico como es el siguiente:

Seleccione un método de pago

Efectivo Tarjeta de crédito

Número de tarjeta:

Fecha de caducidad:

Figura 3 - Formulario de ejemplo

Fragmento de código HTML para el formulario del ejemplo:

<html>
 <body>
  <form action="pago.asp" method="post">
   <p><b>Seleccione un método de pago</b></p>
   <p>Efectivo
      <input type="radio" name="forma_pago" value="efectivo" />
      Tarjeta de crédito
      <input type="radio" name="forma_pago" value="credito" checked="checked"/>
   </p>
   <p>Número de tarjeta:<br /><input type="text" id="cc" /></p>
   <p>Fecha de caducidad:<br /><input type="text" name="caducidad" /></p>
   <p><input type="submit" value="Enviar" /></p>
  </form>
 </body>
</html>

Fragmento de código XForms para el formulario del ejemplo:

<head>
<xforms:model>
  <xforms:instance>
    <ecommerce xmlns="">
      <metodo/>
      <numero/>
      <caducidad/>
    </ecommerce>
  </xforms:instance>
<xforms:submission action="http://www.w3c.es/ejemplo" method="post" 
  id="submit" includenamespaceprefixes=""/>
</xforms:model>
</head>
<body>
<xforms:select1 ref="metodo">
  <xforms:label>Seleccione método de pago:</xforms:label>
  <xforms:item>
    <xforms:label>Efectivo</xforms:label>
    <xforms:value>Efectivo</xforms:value>
  </xforms:item>
  <xforms:item>
    <xforms:label>Crédito</xforms:label>
    <xforms:value>cc</xforms:value>
  </xforms:item>
</xforms:select1>
<xforms:input ref="numero">
  <xforms:label>Número de Tarjeta de Crédito:</xforms:label>
</xforms:input>
<xforms:input ref="caducidad">
  <xforms:label>Fecha de caducidad:</xforms:label>
</xforms:input>
<xforms:submit submission="submit">
<xforms:label>Enviar</xforms:label>
</xforms:submit>
</body>

Más información sobre XForms

XForms 1.0
Recomendación del W3C.
Página principal de XForms.
Toda la información sobre la nueva generación de Formularios Web.
Preguntas más frecuentes sobre XForms.
Respuestas a dudas frecuentes sobre XForms.
Introducción a XForms para autores de HTML.
Proporciona ayuda a la hora de convertir los antiguos formularios en formularios XForms.