TUTORIELS 
Création d'un formulaire XForms
Examen de la spécification XForms 1.0 par la création d'un formulaire simple.-->  (17 octobre 2002 )
 

Après avoir vu les aspects théoriques de XForms, nous en venons ici au coté pratique de la chose: réaliser un formulaire XForms.

Rappels
En HTML classique, un formulaire se trouve sous cette forme:

<form action="form.cgi" method="POST">
  <input type="radio" name="choix" value="oui" checked>oui
  <br>
  <input type="radio" name="choix" value="non">non
  <br>
  Votre nom: <input type="text" name="nom">
  <br>
  Votre pr&eacute;nom: <input type="text" name="prenom">
</form>

Non seulement les attributs name et value sont inclus dans le code décrivant l'interface même du formulaire, mais en plus sa présentation est indiquée directement: en l'occurence, un bouton radio. De fait, ce formulaire ne pourrait être interprété par une plateforme ne reconnaissant pas les boutons radio (un navigateur vocal, par exemple).
De plus, parce que les formulaires HTML combinent les données brutes, l'interface et les actions spécifiées en seul bloc, il devient rapidement compliqué de modifier la présentation ou les éléments d'un formulaire.
Enfin, impossible pour un développeur d'étendre les possibilité du formulaire pour répondre à ses propres besoins.

XForms étant un sorte de "module d'extension" de XHTML (la "version XML du HTML"), il devient de fait possible d'étendre les possibilités d'un formulaire, tout en le rendant plus dynamique et plus facile à mettre en place. Les navigateurs disposant d'un processeur XForms peuvent afficher un formulaire XForms selon les capacités de la plateforme.

Le code
La structure de base d'un formulaire XForms est de la forme suivante:

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xform="http://www.w3.org/2002/01/xforms">
  <head>
    <xforms:model id="formulaire1">
      <xforms:instance>
        <root>
          <choix/>
          <nom/>
          <prenom/>
        </root>
      </xforms:instance>
      <xforms:submission action="form.cgi" method="post" id="form1envoi"/>
    </xforms:model>
  </head>
  <body>
    <xforms:select1 model="formulaire1" ref="choix">
      <xforms:label>Faites un choix</xforms:label>
      <xforms:item>
          <xforms:label>Oui</xforms:label>
          <xforms:value>oui</xforms:value>
      </xforms:item>
      <xforms:item>
          <xforms:label>Non</xforms:label>
          <xforms:value>non</xforms:value>
      </xforms:item>
    </xforms:select1>
    <xforms:input model="formulaire1" ref="nom">
      <xforms:label>Votre nom: </xforms:label>
    </xforms:input>
    <xforms:input model="formulaire1" ref="prenom">
      <xforms:label>Votre prénom: </xforms:label>
    </xforms:input>
    <xforms:submit submission="form1envoi">
      <xforms:label>Envoyer</xforms:label>
    </xforms:submit>
  </body>
</html>

Tous les formulaires XForms sont de cette forme, avec le XForms Model (les données et la logique du formulaire) défini dans le <head>, et la présentation (l'interface utilisateur) dans le <body>.
Attention, cette forme d'écriture est sujette à changements, étant donné que la spécification XForms n'est pas encore définitive. Nous utilisons ici le document de travail daté du 21 août 2002. Selon toute vraisemblance, il correspond à la proposition définitve pour la spécification, mais il vaut mieux être prudent en ce domaine...

Le XForms Model indique juste que ce formulaire doit collecter trois informations (sans qu'on leur donne déjà un typage), et qu'elles seront envoyées via l'URL se trouvant dans l'attribut action.

Nous utilisons ensuite trois contrôleurs XForms: <xform:select1>, <xform:input> et <xform:submit>.
<xform:select1> permet de définir un contrôleur où l'utilisateur doit choisir un seul élément parmi une liste. Selon les capacités de la plateforme, le navigateur affichera cette liste sous forme de boutons radio, de liste déroulante ou autre... Pareillement, le texte de chaque contrôleur est inclus dans un sous-élément du contrôleur. Cela permet d'améliorer l'accessibilité du formulaire.
<xform:input> et <xform:submit> sont assez proches de leur équivalents HTML.
Il est important de noter que les contrôleurs XForms ne sont pas des sous-élements, de <form>. Au lieu de cela, l'attribut model="formulaire1" les identifie comme faisant partie d'un formulaire donné. Pour avoir plusieurs formulaires sur une même page, il faut définir un modèle XForms pour chaque formulaire, puis que chaque élément du formulaire fasse référence à son modèle via l'attribut model=. Cet attribut est optionnel: il n'est pas nécessaire s'il n'y a qu'un seul formulaire dans la page.
Enfin, notez que les balises décrivant les contrôleurs ont été simplifiées par rapport à HTML.

Il s'agit véritablement ici d'un formulaire XForms de base: nous n'y avons ajouté aucune liaisons, ni contrainte de type, comme il est possible de le faire. Nous verrons ces capacités dans une prochain article.

Si le code source pour un même formulaire est sensiblement plus long et visuellement plus compliqué que pour un formulaire HTML, il faut bien intégrer les apports devenus nécessaire de XForms: la possibilité d'utiliser un même formulaire pour tous les supports possèdant un processeur approprié.
Utiliser XForms permettra à l'avenir de déployer, par exemple, une seule version d'un site e-commerce, lisible par l'ensemble des navigateurs, quel que soit la plateforme. Le temps passé à apprendre et mettre en place XForms aujourd'hui sera rapidement justifié par le temps gagner à mettre en place une application globale.

 
[ Xavier Borderie,JDNet
 
Accueil | Haut de page