Génération du site web de l'ULB - format xml

index

page précédente

page suivante

imprimer

envoyer

marquer

<option>: option sélectionnable (liste déroulante, cases à cocher, boutons "radio")

Dans un formulaire, une liste déroulante, un ensemble de cases à cocher ou un ensemble de boutons radio se définissent à l'aide de la même syntaxe. Seule la valeur de l'attribut type ("select", "checkbox" ou "radio") change. C'est le cas également des éléments <option> contenus dans ces trois types de question.

Cela permet de changer aisément d'un type de question à l'autre.

Contenu d'un élément <option>

Un élément <option> peut avoir deux types de contenu:

soit il ne contient qu'un libellé
soit il contient un libellé et un contenu, ce dernier n'étant visible que si l'option est sélectionnée ou cochée

Au niveau des attributs, un élément <option> peut posséder les attributs suivants:

valeur="..." value="..."	donne la valeur du paramètre (pour les listes déroulantes, les boutons radio ou les cases à cocher) à envoyer à l'application distante, si cette option est sélectionnée ou cochée (ces deux attributs sont des synonymes)
nom="..." name="..."	permet de changer le nom du paramètre (pour les listes déroulantes, les boutons radio ou les cases à cocher) à envoyer à l'application distante. Ce nom sera spécifique à cette option-ci, il remplace le nom donné par la balise <nom> éventuelle (ces deux attributs sont des synonymes)
sélectionnée="oui" cochée="oui" selected="yes" checked="yes"	indique que l'option sera sélectionnée ou cochée par défaut, lorsque le formulaire sera affiché (ces quatre attributs sont des synonymes)
docref="..." href="..." ...	n'importe quel lien hypertexte peut être utilisé, afin de suivre ce lien lorsque l'option sera sélectionnée ou cochée
cible="..."	permet de déclencher des actions lorsque l'option sera sélectionnée ou cochée
activer-option="..."	permet de lier cette option du formulaire à une option dans la page. Cette dernière permettera d'activer ou de désactiver des sections optionnelles pour, par exemple, faire apparaître ou disparaître d'autres questions si cette option-ci est sélectionnée ou non

Option avec uniquement un libellé

La plupart du temps, chaque élément option contient uniquement le libellé de l'option. Ce libellé sera affiché dans la liste déroulante ou en regard du bouton radio ou de la case à cocher correspondante.

Le libellé s'écrit simplement entre la balise <option> et </option> (il prend la forme d'une simple chaîne de caractères).

Dans cet exemple, les libellés "membre du personnel", "étudiant" et "extérieur" sont utilisés dans trois options différentes.

Exemple

<input type="radio">
   <nom>type</nom>
   <option valeur="personnel">membre du personnel</option>
   <option valeur="student">étudiant</option>
   <option valeur="ext">extérieur</option>
</input>

Option avec un libellé et un contenu sélectionnable

Il est possible d'utiliser des options plus complexes, contenant un libellé et un contenu. Ce contenu ne sera affiché que si l'option correspondante est sélectionnée.

Pour cela, il faut mentionner le libellé dans un élément <libellé> (ou <label>). Tout ce qui se trouve dans l'élément <option>, excepté ce <libellé>, formera le contenu à afficher.

Dans l'exemple qui suit, les trois options sont définies avec un libellé (élément <libellé>). Le contenu est lui constitué d'un <bloc>. Ce bloc contient une question supplémentaire, qu'il faudra poser uniquement si l'internaute sélectionne l'option en question.

Exemple

<input type="radio">
   <nom>type</nom>
   <option valeur="personnel">
      <libellé>membre du personnel</libellé>
      <bloc style="cadre1">
         <input>
            <nom>matricule</nom>
            <libellé>votre matricule du personnel</libellé>
         </input>
      </bloc>
   </option>
   <option valeur="student">
      <libellé>étudiant</libellé>
      <bloc style="cadre1">
         <input>
            <nom>matricule</nom>
            <libellé>votre matricule étudiant</libellé>
         </input>
      </bloc>
   </option>
   <option valeur="ext">
      <libellé>extérieur</libellé>
      <bloc style="cadre1">
         <input>
            <nom>nom</nom>
            <libellé>vos nom et prénom</libellé>
         </input>
      </bloc>
   </option>
</input>

Dans une grande colonne, cela donne:

Avec une liste déroulante:

Exemple

<input type="select">
   <nom>type</nom>
   <choix/>
   <option valeur="personnel">
      <libellé>membre du personnel</libellé>
      <bloc style="cadre1">
         <input>
            <nom>matricule</nom>
            <libellé>votre matricule du personnel</libellé>
         </input>
      </bloc>
   </option>
   <option valeur="student">
      <libellé>étudiant</libellé>
      <bloc style="cadre1">
         <input>
            <nom>matricule</nom>
            <libellé>votre matricule étudiant</libellé>
         </input>
      </bloc>
   </option>
   <option valeur="ext">
      <libellé>extérieur</libellé>
      <bloc style="cadre1">
         <input>
            <nom>nom</nom>
            <libellé>vos nom et prénom</libellé>
         </input>
      </bloc>
   </option>
</input>

Suivre un lien hypertexte quand l'option sera sélectionnée

Chaque option peut éventuellement possèder un attribut de lien hypertexte (docref, href...). Dans ce cas, ce lien sera suivi lorsque l'option sera sélectionnée.

Si l'attribut nouvel-onglet est utilisé, la page s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre du navigateur. Si l'attribut cible est utilisé, il peut soit désigner une ancre au sein de la page à afficher, soit une série d'actions à exécuter.

Si le navigateur remplace la page courante par celle désignée par le lien hypertexte, les données du formulaire ne seront pas traitées. L'option ne sert qu'a créer une autre manière de naviguer dans une page. Il n'est d'ailleurs pas nécessaire de placer l'élément <input> dans un formulaire (<formulaire>).

Ces deux exemples (une liste déroulante et des boutons radio) montrent comment changer de page en sélectionnant des options.

Exemple

<input type="select">
   <option selected="yes">plus d'info?</option>
   <option docref="site:help:introduction-xml:xml">introduction au xml</option>
   <option docref="site:help:format-xml-ulb:xmlulb">format xml de l'ulb</option>
</input>

<input type="radio" nombre-colonnes="1">
   <libellé>plus d'info?</libellé>
   <option docref="site:help:introduction-xml:xml">introduction au xml</option>
   <option docref="site:help:format-xml-ulb:xmlulb">format xml de l'ulb</option>
</input>

Déclencher des actions quand l'option sera sélectionnée

L'attribut cible peut être placé sur une <option> pour déclencher une ou plusieurs actions lorsque l'option sera sélectionnée. Cela permet, par exemple, d'activer ou de désactiver des options afin d'afficher ou de faire disparaître d'autres questions dans le formulaire.

L'option du formulaire sera toujours sélectionnée ou cochée, quel que soit le résultat de l'exécution de ces actions.

Par contre, si l'attribut cible est utilisé conjointement avec un attribut hypertexte, ce lien hypertexte ne sera suivi que si l'exécution de ces actions se terminent normalement (soit à la fin de la liste des actions, soit via l'action terminer. Si les actions sont interrompues, via une action arrêter, le lien hypertexte ne sera pas suivi (mais l'option du formulaire sera bien sélectionnée ou cochée, selon le cas).

Dans cet exemple, on se sert d'un ensemble de boutons radio pour activer des options etudiant, personnel et visiteur.

Ces options sont ensuite utilisées pour afficher des questions supplémentaires dans le formulaire (demander le matricule étudiant si l'option "un étudiant" est sélectionnée, le matricule du personnel si l'option "un membre du personnel" est sélectionnée...).

Exemple

<formulaire>
   <input type="radio" nombre-colonnes="1">
      <nom>profil</nom>
      <libellé>vous êtes</libellé>
      <option cible="activer:etudiant">un étudiant</option>
      <option cible="activer:personnel">un membre du personnel</option>
      <option cible="activer:visiteur">un visiteur extérieur</option>
   </input>
   <input options="personnel">
      <nom>matricule</nom>
      <libellé>votre matricule du personnel</libellé>
   </input>
   <input options="etudiant">
      <nom>matricule</nom>
      <libellé>votre matricule étudiant</libellé>
   </input>
</formulaire>

Les options étant mutuellement exclusives, dès qu'on en active une, les autres se désactivent automatiquement. Elles sont déclarées comme suit:

<page>
   <options mode="exclusif">
      <option id="etudiant"/>
      <option id="personnel"/>
      <option id="visiteur"/>
   </options>
   ...
</page>

Le même exemple, mais l'option étudiant ne sera sélectionnée que si l'utilisateur confirme le message affiché par une boîte de dialogue créée par l'action confirmer.

Si l'utilisateur clique sur [ok], l'option étudiant sera activée et le bouton radio sélectionné. S'il clique sur [cancel], l'action arrêter fera en sorte que ni l'option ne sera activée, ni le bouton radio sélectionné.

C'est une action si::arrêter qui décide de la marche à suivre en fonction du choix de l'utilisateur.

Exemple

<formulaire>
   <input type="radio" nombre-colonnes="1">
      <nom>profil</nom>
      <libellé>vous êtes</libellé>
	  <option cible="confirmation(vous devez en ordre d'inscription si vous sélectionnez cette option),si::arrêter,activer:etudiant">un étudiant</option>
      <option cible="activer:personnel">un membre du personnel</option>
      <option cible="activer:visiteur">un visiteur extérieur</option>
   </input>
   <input options="personnel">
      <nom>matricule</nom>
      <libellé>votre matricule du personnel</libellé>
   </input>
   <input options="etudiant">
      <nom>matricule</nom>
      <libellé>votre matricule étudiant</libellé>
   </input>
</formulaire>

Les options étant mutuellement exclusives, dès qu'on en active une, les autres se désactivent automatiquement. Elles sont déclarées comme suit:

<page>
   <options mode="exclusif">
      <option id="etudiant"/>
      <option id="personnel"/>
      <option id="visiteur"/>
   </options>
   ...
</page>

Lier une option d'un formulaire à une option dans la page

Si l'élément <option> possède un attribut activer-option="oui", ou si l'élément <input> possède ce même attribut, alors l'option du formulaire sera accessible dans le reste de la page.

On pourra ainsi l'utiliser pour activer ou désactiver des sections optionnelles.

Le nom de cette option dans le reste de la page sera égale au nom du paramètre associé à l'option, suivi d'un deux-points et de la valeur de l'option (si le paramètre n'est pas défini, seule la valeur de l'option sera utilisée).

Toutefois, si l'attribut activer-option est utilisé sur une <option> particulière, vous pouvez lui donner comme valeur le nom de l'option que vous désirez activer ou désactiver.

Pour plus d'informations, consultez la page Activer/désactiver une option via un formulaire

Dans l'exemple qui suit, l'attribut activer-options="oui" permet l'utilisation de trois options type:personnel, type:student et type:ext dans le reste de la page. Elles sont utilisés pour afficher trois sections optionnelles (en l'occurence des <bloc options="xxx">) qui contiennent chacune des questions supplémentaires.

Exemple

<input type="radio" activer-option="oui">
   <nom>type</nom>
   <option valeur="personnel">membre du personnel</option>
   <option valeur="student">étudiant</option>
   <option valeur="ext">extérieur</option>
</input>		

<bloc style="cadre1" options="type:personnel">
   <input>
      <nom>matricule</nom>
      <libellé>votre matricule du personnel</libellé>
   </input>
</bloc>

<bloc style="cadre1" options="type:student">
   <input>
      <nom>matricule</nom>
      <libellé>votre matricule étudiant</libellé>
   </input>
</bloc>

<bloc style="cadre1" options="type:ext">
   <input>
      <nom>nom</nom>
      <libellé>vos nom et prénom</libellé>
   </input>
</bloc>

Le même exemple que le précédent, mais l'attribut activer-option="..." est utilisé au niveau des <option> afin de donner un nom particulier aux options (perso, etudiant et visiteur).

Exemple

<input type="radio">
   <nom>type</nom>
   <option valeur="personnel" activer-option="perso">membre du personnel</option>
   <option valeur="student" activer-option="etudiant">étudiant</option>
   <option valeur="ext"  activer-option="visiteur">extérieur</option>
</input>		

<bloc style="cadre1" options="perso">
   <input>
      <nom>matricule</nom>
      <libellé>votre matricule du personnel</libellé>
   </input>
</bloc>

<bloc style="cadre1" options="etudiant">
   <input>
      <nom>matricule</nom>
      <libellé>votre matricule étudiant</libellé>
   </input>
</bloc>

<bloc style="cadre1" options="visiteur">
   <input>
      <nom>nom</nom>
      <libellé>vos nom et prénom</libellé>
   </input>
</bloc>

sommaire

index

page précédente

page suivante

English	中文	Page d'accueil	Contacts	Plan des campus
					pages annuaire