Activer/désactiver une option via un formulaire

Les éléments suivants, présents le plus souvent au sein d'un formulaire, peuvent être utilisés pour activer ou désactiver une option:

<input type="select">, qui implémente une liste déroulante;
<input type="radio">, qui implémente un ensemble de boutons de type "radio";
<input type="checkbox">, qui implémente un ensemble de cases à cocher.

Chacun de ces éléments contient un ensemble d'éléments <option valeur="...">. Ces derniers servent à définir les options dans la liste déroulante, les boutons radio ou les cases à cocher. L'utilisateur pourra sélectionner l'une ou l'autre de ces options, ou plusieurs options simultanément, conformément aux modes de fonctionnement des liste déroulantes, des boutons radio ou des cases à cocher.

Grâce à un attribut activer-option="oui", vous pouvez également associer une option à chaque élément <option> ou seulement à quelques uns d'entre-eux. Cette option sera activée ou désactivée lorsque l'utilisateur sélectionne ou désélectionne l'élément en question dans le formulaire.

L'option sera alors disponible dans l'ensemble de la page web pour activer ou désactiver des sections optionnelles (afin de faire apparaître ou disparaître un bloc, modifier le texte d'un paragraphe...).

Cette option est particulièrement utile au sein même d'un formulaire, afin de faire apparaître ou disparaître certaines questions en fonction du choix de l'utilisateur.

Par défaut, le nom de cette option sera égal au nom du paramètre associé à l'option dans le formulaire, suivi d'un deux-points et de la valeur de l'élément <option> correspondant (si l'option du formulaire n'est pas associée à un paramètre, alors seule sa valeur sera utilisée). Vous pouvez également choisir le nom de cette option.

Si les options sont mutuellement exclusives (dans le cas des boutons radio ou des listes déroulantes ne possédant pas l'attribut multiple="oui"), les options correspondantes seront placées dans un groupe mutuellement exclusif (une seule de ces options pourra être active à un moment donné, les autres seront automatiquement désactivées).

Remarque: il n'est pas nécessaire d'utiliser les éléments <input type="select">, <input type="radio"> ou <input type="checkbox"> au sein d'un formulaire. On peut s'en servir uniquement pour activer ou désactiver des options, en dehors de tout formulaire.

Exemple avec une liste déroulante

Dans cet exemple, une première question "Vous venez à l'ULB:" est posée à l'utilisateur. Chaque choix possible est associé à une option, grâce à l'attribut activer-option.

On aura ainsi trois options "mode:voiture1", "mode:transport1" et "mode:pied1" qui seront activées ou désactivées en fonction de la réponse de l'utilisateur.

Les trois autres questions seront affichées suivant l'état de ces trois options, grâce à leur attribut options.

Exemple

<formulaire>
   <input type="select" activer-option="oui">
      <nom>mode</nom>
      <libellé>vous venez à l'ULB</libellé>
      <choix/>
      <option valeur="voiture1">en voiture</option>
      <option valeur="transport1">en transport en commun</option>
      <option valeur="pied1">en vélo ou à pied</option>
   </input>
   
   <input type="radio" options="mode:voiture1|mode:transport1">
      <nom>choix</nom>
      <libellé>combien de temps mettez-vous</libellé>
      <option valeur="0-10">moins de 10 minutes</option>
      <option valeur="10-30">moins de 30 minutes</option>
      <option valeur="30-60">moins d'une heure</option>
      <option valeur="60-plus">plus d'une heure</option>
   </input>
   <input type="radio" options="mode:voiture1">
      <nom>choix</nom>
      <libellé>pratiquez-vous le covoiturage</libellé>
      <option valeur="O">oui</option>
      <option valeur="N">non</option>
   </input>
   <input type="radio" options="mode:pied1|mode:transport1">
      <nom>distance</nom>
      <libellé>quelle distance parcourez-vous en vélo ou à pied</libellé>
      <option valeur="1">moins de 1 km</option>
      <option valeur="5">moins de 5 km</option>
      <option valeur="5-more">plus de 5 km</option>
   </input>
</formulaire>

Exemple avec des boutons radio

Exemple avec des cases à cocher

Lien entre les options et le formulaire

Les exemples qui précèdent montrent que si l'utilisateur effectue une sélection ou une désélection dans le formulaire, cela active ou désactive l'option qui y est associée.

L'inverse est vrai également. Si l'état de l'option est modifié (via un lien hypertexte, par exemple), cela changera la sélection dans le formulaire, comme le montre l'exemple suivant.

Dans cet exemple, on peut activer ou désactiver trois options via un formulaire ou via trois liens hypertextes.

Comme la sélection dans le formulaire se fait via des boutons radio, uniquement une seule option pourra être active à la fois (car un seul bouton radio peut être actif à la fois).

Exemple

<bloc bords="arrondis" style="colorBar1">
   <section options="choix:o1">
      <p>L'option <code>o1</code> est active</p>
   </section>
   <section options="choix:o2">
      <p>L'option <code>o2</code> est active</p>
   </section>
   <section options="choix:o3">
      <p>L'option <code>o3</code> est active</p>
   </section>
   <section options="!choix:o1,!choix:o2,!choix:o3">
      <p>Aucune option n'est active</p>
   </section>
</bloc>

<input type="radio" activer-option="oui">
   <nom>distance</nom>
   <libellé>Modifiez les options via des boutons radios:</libellé>
   <option valeur="o1">option 1</option>
   <option valeur="o2">option 2</option>
   <option valeur="o3">option 3</option>
</input>						

<bloc bords="arrondis" style="colorBar1">
   <p>Modifiez les options via des liens hypertextes:</p>
   <p>
    <a cible="inverser:choix:o1">o1</a> - <a cible="inverser:choix:o2">o2</a> - <a cible="inverser:choix:o3">o3</a>
   </p>
</bloc>

Modifiez les options via des liens hypertextes:

o1 - o2 - o3

Chaque <option> est associée à une option

Si l'attribut activer-option="oui" est placé sur l'élément <input>, une option sera associée à chacun des éléments <option> contenu dans cet élément.

Le nom de cette option sera égal au nom de son paramètre (généralement donné par un élément <nom>) combiné avec sa valeur, séparé par un deux-points.

Quelques uns des <option> en particulier sont associés à une option

L'attribut activer-option="oui" peut également être placé sur un ou plusieurs éléments <options> individuellement. Seuls ces éléments-là seront alors associés à une option.

Choisir le nom de l'option

Si vous utilisez l'attribut activer-option sur l'élément <option>, la valeur de l'attribut activer-option ne doit plus nécessairement être égal à "oui" ou à "non". Il peut contenir le nom de l'option que vous voulez activer, indépendamment du nom du paramètre et de la valeur de l'élément <option>. Dans cet exemple, les options s'appeleront individual-car et public-transport.

sommaire

index

page précédente

page suivante

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