Dernière mise à jour :2008-10-14

informatique

Les formulaires électroniques sont à la base de toute interactivité sur le web, par exemple, les moteurs de recherche, les forums de discussion ou encore, les sites de commerce électronique. XForms est une spécification de définition de formulaires électroniques basée sur la technologie XML. Cette spécification dont l'élaboration a été entammée par le W3C en 1999 est destinée aux futur générations de sites web.

Pourquoi XForms?

Les formulaires électroniques classiques réalisés au format HTML ont été développé pour être visualisé part un navigateur web sur un ordinateur standard. Maintenant, on visite le web à partir de plusieurs supports tels, les téléphones portables, les ordinateurs de poche etc... C'est lorsqu'il vient le temps de présenter un même formulaire sur plusieurs supports que les formulaires classiques montrent leurs limites.

C'est ce problème que XForms vient corriger. La principale différence entre les formulaires XForms et HTML c'est la séparation entre les données collectées et le balisage des commandes collectant celles-ci. De plus, bien que conçus à la base pour être utilisé avec XHTML, XForms peut s'intégrer à n'importe quel langage de balise compatible.

Composition des formulaires XForms

Les formulaires XForms se composent en premier lieu d'une section qui décrit ce que fait le formulaire. On appel cette section, le modèle XForms. Les formulaires XForms ce composent aussi d'une seconde section qui décrit la façon dont le formulaire sera présenté (interface utilisateur).

Exemple de formulaire XForms

Prenons un exemple simple d'un formulaire électronique qui pourrait ressembler à ceci :

Type de carte de crédit :

Visa :   Mastercard :

Numéro de la carte :

Date d'expiration :

On peut représenter la collecte des données de ce formulaire dans un élément XForms model, lequel serait typiquement contenu dans la balise head d'un document XHTML comme dans cet exemple :

Listing 1.0 Exemple de XForms Model
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:a5="http://www.a525g.com/a5">
  <head>
    <xforms:model id="form1">
      <xforms:instance>
        <a5:donnee>
          <a5:carte />
          <a5:numero />
          <a5:expiration />
        </a5:donnee>
      </xforms:instance>
      <xforms:submission action="http://www.a525g.com/" method="post" id="s1" />
    </xforms:model>
  </head>

On définie ensuite (dans l'élément body en XHTML) un ensemble de commandes de formulaire pour la saisie des données. Les commandes sont liées au modèle via le mécanisme de liaison XForms (voir attribut ref dans l'exemple ci-dessous).

Listing 2.0 Exemple d'interface utilisateur XForms
  <body>
  <p>
    <xforms:select1 model="form1" ref="carte">
      <xforms:label xml:lang="fr">Type de carte de crédit : </xforms:label>
      <xforms:choices>
        <xforms:item>
          <xforms:label xml:lang="fr">Visa</xforms:label>
          <xforms:value>visa</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label xml:lang="fr">Mastercard</xforms:label>
          <xforms:value>master</xforms:value>
        </xforms:item>
      </xforms:choices>
    </xforms:select1>
  </p>
  <p>
    <xforms:input ref="numero">
      <xforms:label xml:lang="fr">Numéro de la carte : </xforms:label>
      <xforms:alert xml:lang="fr">Ne pas mettre d'espaces entre les numéros de la carte.</xforms:alert>
    </xforms:input>
  </p>
  <p>
    <xforms:input ref="numero">
      <xforms:label xml:lang="fr">Date d'expiration</xforms:label>
    </xforms:input>
  </p>
  <p>
    <submit submission="s1">
      <label xml:lang="fr">Acheter</label>
    </submit>
  </p>
  </body>
</html>

Dans l'exemple ci-dessus, le model XForms (listing 1.0) indique simplement que le formulaire doit collecter trois informations. À ce stade il n'est pas encore question de typage.

Dans la partie décrivant l'interface utilisateur (listing 2.0) on utilise trois contrôleurs XForms soit : select1, input et submit. Le premier indique que l'utilisateur doit choisir un élément parmi une liste. Selon la plate-forme utilisée pour visualiser la page, l'élément select1 sera présenté sous forme de bouton radio, de liste déroulante ou autre. input et submit pour leur part sont presque identique à leur équivalent au format HTML.

Pour créer des liens entre l'interface utilisateur et le modèle XForms, on se sert des attributs model (lien vers le modèle) et ref (lien vers un élément).

XForms permet aussi d'effectuer des validations de base, d'envoyer des messages d'alerte etc.. Cet article n'est seulement qu'une introduction au langage. Pour en savoir plus, je vous suggère de consulter le site du W3C (w3.org). Bonne programmation!

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2004-10-25

Aucun commentaire pour l'instant.