Formulaires: <formulaire>

Exemple de formulaire

Les actions

Différents types d'action peuvent être déclenchées lorsque l'utilisateur clique sur un bouton du formulaire, grâce à un des sous-éléments suivants (à placer tout au début de l'élément <formulaire>):

• <action>, pour envoyer les données à une application, qui sera appelée avec les paramètres récoltés par le formulaire. En règle générale, cette application va renvoyer une réponse sous la forme d'une page html qui sera affichée en lieu et place de la page web qui contient le formulaire. Ce type d'action est similaire à celui utilisé en html;

• <interaction>, pour déclencher des actions définies par cet élément. Ces actions peuvent provenir d'une application, qui sera appelée avec les paramètres récoltés par le formulaire. Contrairement à <action> la page web qui contient le formulaire n'est pas remplacée par une autre page. Les actions renvoyées par l'application peuvent servir à modifier son contenu (par exemple, faire disparaître le formulaire et afficher à la place un message de confirmation provenant de l'application distante);

• <mail>, pour envoyer les données récoltées dans le formulaire par mail. Après l'envoi, vous avez la possibilité de faire afficher une nouvelle page dans le navigateur (avec, par exemple, un message de confirmation indiquant que l'envoi s'est bien déroulé) ou de laisser la page qui contient le formulaire affichée et, éventuellement, déclencher des actions afin de modifier son contenu;

• <record>, pour enregistrer les données récoltées par le formulaire dans une base de données. Après l'enregistrement, vous avez la possibilité de faire afficher une nouvelle page dans le navigateur (avec, par exemple, un message de confirmation indiquant que l'enregistrement s'est bien déroulé) ou de laisser la page qui contient le formulaire affichée et, éventuellement, déclencher des actions afin de modifier son contenu;

• <test>, pour envoyer les données à une application de test qui ne fait rien d'autre que d'afficher le contenu du formulaire; En règle générale, cette application va renvoyer une réponse sous la forme d'une page html qui sera affichée en lieu et place de la page web qui contient le formulaire.

Ces actions peuvent être combinées (par exemple, réaliser l'envoi des données par mail, l'enregistrement de ces données dans une base de données et terminer par l'envoi d'un message de confirmation à la personne qui a rempli le formulaire).

Il est également possible de définir plusieurs groupes d'actions dans le même formulaire. Chaque bouton pourra déclencher l'une ou l'autre de ces groupes.

Les champs

Différents types de champ peuvent être utilisés au sein du formulaire, grâce à des sous-éléments <input> dont l'attribut type définit le type en question:

• <input type="text">: zone de saisie de texte sur une seule ligne;

• <input type="textarea">: zone de saisie de texte sur plusieurs lignes;

• <input type="richtext">: zone de saisie de texte au format enrichi (gras, italique, liens...) sur plusieurs lignes;

• <input type="select">: zone de saisie avec une liste déroulante;

• <input type="radio">: zone de saisie avec des boutons de type radio (un seul est sélectionnable à la fois);

• <input type="checkbox">: zone de saisie avec des cases à cocher (plusieurs sont sélectionnables à la fois);

• <input type="date">: zone de saisie pour une date;

• <input type="période">: zone de saisie pour une période comprise entre deux dates;

• <input type="file">: zone de sélection et d'envoi d'un ou plusieurs fichiers;

• <input type="hidden">: zone cachée (non visible) servant à stocker une valeur;

Déclencher l'envoi du formulaire par un bouton

Une action ou un groupe d'actions du formulaire peut être déclenché via un bouton, ce qui provoque généralement l'envoi des données récoltées par le formulaire à une application. Un bouton est défini grâce à un élément:

• <bouton>: bouton clickable affichant un libellé (envoyer, enregistrer...)

• <button>: synonyme de <bouton>.

Si plusieurs groupes d'actions existent dans le même formulaire, l'élément <bouton> utilisera un attribut action="xxx" pour désigner le groupe d'actions à déclencher.

Déclencher l'envoi du formulaire via une action

Une action ou un groupe d'actions du formulaire peut également être déclenché via une action envoyer, utilisée dans un lien hypertexte par exemple.

Si plusieurs groupes d'actions existent dans le même formulaire, l'action envoyer:xxx désignera le groupe d'actions à déclencher.

Style d'un formulaire

Un formulaire est considéré comme un bloc. Tous les attributs (style, bords et ses variantes, ajuster-hauteur...) définis pour les blocs peuvent être utilisés, ainsi que l'élément <titre>.

En voici quelques exemples:

Style des questions dans un formulaire

Chaque élément <input> implémentant une question est également considéré comme un bloc. Tous les attributs (style, bords et ses variantes, ajuster-hauteur...) définis pour les blocs peuvent être utilisés, sauf l'élément <titre> (qui n'a pas d'utilité ici).

En voici quelques exemples:

Grouper les questions et/ou les boutons sur une même ligne

Par défaut, les questions et les boutons se mettent les uns en dessous des autres (sur des lignes séparées).

Il peut s'avèrer utile de regrouper certaines questions et/ou boutons sur la même ligne. Il faut pour cela utiliser un élement <groupe> et y placer les <input> et les <bouton> que l'on veut grouper.

Comme tout s'écrit sur la même ligne, il faut veiller à ce que les libellés les commentaires éventuels ne soient pas trop longs afin de ne pas perturber la mise en page du formulaire.

<formulaire>
   <action href="http://www.ulb.ac.be/sitemanagerapps/samples/dumpform.php" méthode="post"/>
   <groupe>
      <input bords="carrés" style="colorBar6">
         <nom>nom</nom>
         <libellé>nom et prénom</libellé>
      </input>
      <input bords="carrés" style="colorBar6">
         <nom>e-mail</nom>
         <libellé>adresse e-mail</libellé>
      </input>
      <bouton>
         <nom>ok</nom>
         <libellé>envoyer</libellé>
      </bouton>
   </groupe>
</formulaire>				

Ce qui donne:

Si vous groupez les questions, l'attribut style et les autres attributs de bloc que vous mettez sur les éléments <input> seront ignorés. Par contre vous pouvez les déplacer au niveau de l'élément <groupe>.

<formulaire>
   <action href="http://www.ulb.ac.be/sitemanagerapps/samples/dumpform.php" méthode="post"/>
   <groupe style="colorBar5" bords="arrondis">
      <titre>
         <titre1 toc="non">Entrez vos coordonnées</titre1>
      </titre>
      <input>      
         <nom>nom</nom>
         <libellé>nom et prénom</libellé>
      </input>
      <input>
         <nom>e-mail</nom>
         <libellé>adresse e-mail</libellé>
      </input>
      <bouton>
         <nom>ok</nom>
         <libellé>envoyer</libellé>
      </bouton>
   </groupe>
</formulaire>				

Ce qui donne:

Questions optionnelles

Les questions étant considérées comme des blocs, elles peuvent se comporter comme des sections optionnelles et peuvent donc apparaître ou disparaître suivant l'état d'une option.

Comme cette option peut être activée ou désactivée à partir du formulaire (à l'aide d'une liste déroulante, de boutons radio ou de cases à cocher), il est facile de réaliser des formulaires dynamiques où des questions apparaissent ou disparaissent en fonction des réponses antérieures.

Une autre manière de procéder, encore plus simple, consiste à utiliser des options avec un libellé et un contenu. Ce contenu ne sera visible que si l'option est sélectionnée; il peut contenir tout ce qu'un bloc peut contenir, et notamment une partie des questions du formulaire à remplir.

Contrôler le formulaire et son contenu via des actions

Outre l'action envoyer citée plus haut, il existe d'autres actions permettant de contrôler le formulaire ainsi que son contenu.

Ces actions peuvent s'utiliser dans le formulaire (par exemple en réaction à une action de l'utilisateur: lorsqu'il clique sur un bouton, lorsqu'il sélectionne une option, etc.), ou en dehors du formulaire (par exemple en cliquant sur un lien hypertexte).

Certaines s'appliquent sur l'ensemble du formulaire, d'autres sur un champ en particulier.

Elles permettent, entre-autres:

• de formatter et de valider le contenu du formulaire, en affichant éventuellement des messages d'erreur

• de réinitialiser le formulaire, en supprimant notamment l'affichage des messages d'erreur

• de modifier le contenu des champs du formulaire et/ou de la valeur par défaut associée à ces champs

• de recharger les champs avec leur valeur par défaut

• de déclencher l'envoi du formulaire

Pré-remplissage du formulaire

Chaque élément <input> peut avoir une valeur par défaut, donnée par un élément <valeur>, qui servira à pré-remplir le formulaire lorsque la page sera affichée.

Données paramétrables

Le contenu de l'élément <valeur> peut faire appel à des paramètres, écrits sous la forme "{xxxx:yyyy}".

Données paramétrables provenant de l'Intranet

Si votre page est protégée par l'Intranet de l'ULB, il est facile de pré-remplir le formulaire avec les informations disponibles sur la personne connectée (matricule, nom, prénom...).

Pour cela, il suffit de donner une valeur par défaut aux zones que vous désirez préremplir et d'utiliser dans cette valeur des paramètres correspondant aux informations de l'intranet ({intranet:matricule}, {intranet:nom}, {intranet:prénom}...).

Ensemble de paramètres lié au formulaire

Chaque formulaire est lié à un ensemble de paramètres. Ces paramètres contiennent les valeurs encodées dans le formulaire (consultez la liste des paramètres récoltés par le formulaire).

Par défaut, cet ensemble de paramètres s'appelle form et n'est accessible qu'à l'intérieur de la balise <formulaire> (une action, par exemple, qui envoie par mail le contenu du formulaire pourra construire le sujet et le corps du message à envoyer en utilisant les paramètres en question).

Vous pouvez également lui donner un nom, en utilisant un attribut set="xxxx" à placer sur l'élément <formulaire>. Dans ce cas, cet ensemble de paramètres pourra s'utiliser également à l'aide de ce nom, tant à l'intérieur qu'à l'extérieur de la balise <formulaire> (à l'intérieur du formulaire, les noms form et xxxx pourront indifféremment être utilisés).

Un paramètre yyyy (lié, par exemple, à une zone de saisie de texte dont le <nom> est égal yyyy) s'écrira:

• {xxxx:yyyy} à l'extérieur du formulaire

• {xxxx:yyyy} ou {form:yyyy} à l'intérieur du formulaire