Guía Breve de XForms

Saltar Navegación.

[¿Qué es?] [¿Para qué sirve?] [¿Cómo funciona?] [Ejemplos] [Más información]

¿Qué es XForms?

Saltar Introducción.

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:

• Reutilización: ya que los módulos XForms pueden reutilizarse independientemente de los datos que recogen
• Independencia de Dispositivo: gracias a que los controles de la interfaz de usuario son abstractos y sólo se indican sus características genéricas, lo que permite su representación en diferentes dispositivos
• Accesibilidad: al separar presentación y contenido la información está disponible de forma más sencilla para los usuarios que precisen de ayudas técnicas para la navegación en la Web.

¿Para qué sirve?

Saltar Uso.

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

• Comprobar automáticamente los valores de los datos mientras el usuario los introduce.
• Indicar que ciertos campos son obligatorios y que el formulario no podrá ser enviado sin esta información.
• Enviar formularios de datos como XML , ya que XForms es XML.
• La integración con Servicios Web, por ejemplo, usando SOAP y XML RPC.
• Enviar el mismo formulario a diferentes servidores (por ejemplo, la búsqueda de una palabra se envía a diferentes motores de búsqueda).
• Guardar y restaurar valores en y desde un archivo.
• Utilizar el resultado de un envío como entrada para un formulario posterior.
• Obtener los datos iniciales para un formulario a partir de un documento externo.
• Deducir valores desde otros valores presentes en el formulario, por ejemplo que el campo "cantidad total" contenga la suma de todas la compras individuales.
• Forzar valores para que aparezcan de determinada forma, por ejemplo obligando a que los valores estén comprendidos en un rango determinado.
• Construir formularios al estilo de "cesta de la compra" y "asistentes" sin necesidad de programar.
• Utilizar nuevos métodos de envío en comparación con los formularios HTML. Todos ellos son métodos HTTP estándar para enviar datos a través de la red.
• Mejorar la experiencia de los usuarios.
• Combinar tecnologías XML existentes.
• Lograr la Independencia de Dispositivo.
• Facilitar la creación de formularios complejos.

¿Cómo funciona?

Saltar Funcionamiento.

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.

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.

Ejemplos

Saltar 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:

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.

Volver al inicio.