Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

<bouton>: bouton pour envoyer le formulaire

Un élément <bouton> (ou <button> qui est un synonyme) permet d'afficher un bouton dans un formulaire. Lorsque l'utilisateur cliquera sur le bouton, il déclenchera une action ou un groupe d'actions du formulaire.


Cet élément <bouton> est constitué de:

  • d'un <nom> éventuel qui va donner le nom du paramètre à envoyer avec les données du formulaire (qui ne sera pas visible par l'utilisateur). Ce paramètre permettra à l'application de savoir quel bouton a été cliqué. Si ce <nom> n'est pas donné, aucun paramètre ne sera envoyé;

  • suivi d'un <libellé> obligatoire qui va donner le libellé à afficher dans le formulaire (visible par l'utilisateur et qui sera envoyé comme valeur du paramètre ci-dessus);


Il peut en outre posséder les attributs suivants:

  • action="...": qui désigne l'action ou le groupe d'actions à déclencher, via une ancre, lorsque le bouton est cliqué. Si cet attribut n'est pas présent, se sont toutes les actions qui ne possèdent pas d'ancre qui seront déclenchées;

  • envoyer="...": qui permet de choisir si, oui ou non, le bouton doit envoyer un paramètre à l'application distante;

  • un attribut hypertexte (href, docref...): qui permet d'afficher une page dans le navigateur, comme dans un lien <a href="..."> classique;

  • cible="...": qui permet de déclencher des actions (notamment pour valider le formulaire, demander une confirmation, etc.) avant de procéder (ou non) à l'envoi du formulaire;

  • tous les attributs de style d'un bloc (style, bords, etc.), un bouton pouvant être considéré comme un bloc.

Dans cet exemple, si vous cliquez sur le bouton, un paramètre go=enregistrer sera envoyé à l'application distante.

Exemple
<formulaire>
   <test/>

   <bouton>
      <nom>go</nom>
      <libellé>enregistrer</libellé>								
   </bouton>
</formulaire>

Dans cet autre exemple, ce sont deux boutons (dans un groupe) qui sont utilisés pour déclencher deux actions différentes. Le lien entre le bouton et l'action se fait grâce à un attribut action qui mentionne l'ancre de l'action à déclencher (pour plus d'information).

Exemple
<formulaire options="!ok">
   <action ancre="envoyer" 
           href="http://www.ulb.ac.be/sitemanagerapps/samples/record.php" 
           cible="activer:ok,html:reponse"/>
           
   <test ancre="test"/>

   <input>
      <nom>nom</nom>
      <libellé>votre nom</libellé>
   </input>
   
   <groupe>
      <bouton action="envoyer">
         <nom>go</nom>
         <libellé>envoyer</libellé>								
      </bouton>

      <bouton action="test">
         <nom>test</nom>
         <libellé>test</libellé>								
      </bouton>
   </groupe>   
</formulaire>   

<bloc options="ok" style="colorBar5">
   <html ancre="reponse">
      <p>veuillez-patienter...</p>
   </html>
</bloc>

Attributs de lien hypertexte sur un bouton

Un bouton peut posséder n'importe quel attribut de lien hypertexte (href, docref, rel-href...). Cet attribut sera alors utilisé pour charger une nouvelle page dans le navigateur, comme dans le cas d'un lien hypertexte classique, sans procéder à l'envoi des données du formulaire.

Dans ce cas, les boutons peuvent s'utiliser en dehors d'un formulaire.

Un bouton peut également posséder un attribut cible pour désigner une ancre particulière dans la page visée par le lien hypertexte, ou contenir une liste d'actions à exécuter (voir ci-après).
Exemple
<groupe>				
   <bouton href="http://www.lesoir.be/">
      <libellé>Le Soir</libellé>
   </bouton>      
   <bouton href="http://www.lalibre.be/">
      <libellé>La Libre</libellé>
   </bouton>
</groupe>


Déclencher des actions via le bouton

Un bouton peut posséder un attribut cible. Celui-ci contiendra une liste d'actions à exécuter avant l'envoi du formulaire. Si cette liste d'actions se termine normalement (lorsque la dernière action est exécutée, ou lorsque l'action terminer est exécutée), le bouton déclenchera l'action choisie pour envoyer les données récoltées par le formulaire ou pour suivre le lien hypertexte.

Par contre, si cette liste d'actions se termine anormalement ou via l'action arrêter, le bouton n'aura pas d'effet (l'action du formulaire ne sera pas déclenchée ou le lien ne sera pas suivi).

Dans cet exemple, l'attribut cible placé sur le bouton demande une confirmation à l'utilisateur (action confirmation). Si celui-ci clique sur [ok], l'action suivante (si::arrêter) n'aura pas d'effet et la liste des actions se terminera normalement, ce qui permettra l'envoi du formulaire.

Par contre, si l'utilisateur clique sur [cancel], l'action si::arrêter terminera anormalement la liste des actions et le bouton n'aura aucun effet sur l'envoi du formulaire.

Exemple
<formulaire>
   <test/>
   <input bords="arrondis" style="voile" type="text">
      <nom>nom</nom>
      <libellé>votre nom</libellé>
   </input>
   <input bords="arrondis" style="voile" type="text">
      <nom>prenom</nom>
      <libellé>votre prénom</libellé>
   </input>
   <bouton cible="confirmation(êtes-vous sûr ?),si::arrêter">
      <nom>ok</nom>
      <libellé>envoyer</libellé>
   </bouton>						
</formulaire>

Votre nom:

Votre prénom:
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique