2.4 Les champs de saisie

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

XUL possède des éléments qui sont similaires aux champs des formulaires HTML.

Les champs de saisie de texte

Le HTML possède une balise input pouvant être utilisée comme champ de saisie de texte. XUL possède un élément similaire, textbox, utilisé comme champ de saisie de texte. Sans aucun attribut, l'élément textbox crée une boîte dans laquelle l'utilisateur peut entrer du texte. Les boîtes de texte acceptent plusieurs attributs similaires à la balise input de l'HTML. En voici quelques uns :

id

Un identifiant unique permettant d'identifier la boîte de texte.

class

La classe du style de la boîte de texte.

value

Si vous voulez donner une valeur par défaut à la boîte de texte, renseignez l'attribut value.

disabled

Mettez la valeur true pour empêcher l'insertion de texte.

type

Vous pouvez renseigner cet attribut avec la valeur spéciale password pour créer une boîte de texte dans laquelle tout ce qui est saisi est caché. Il est utilisé habituellement pour les champs de saisie de mot de passe.

maxlength

Le nombre maximum de caractères que l'on peut saisir dans la boîte de texte.

Notez que, tandis qu'en HTML différentes sortes de champs peuvent être créées avec l'élément input, il y a un élément différent pour chaque type de champs en XUL.

L'exemple suivant montre quelques boîtes de texte :

Exemple 2.4.1 : Source Voir

<label control="some-text" value="Entrez du texte"/>
<textbox id="some-text"/>
<label control="some-password" value="Entrez un mot de passe"/>
<textbox id="some-password" type="password" maxlength="8"/>

Boîte de texte multiligne

Les exemples de boîtes de texte ci-dessus créent des champs de saisie qui ne peuvent être utilisés que pour la saisie d'une seule ligne de texte. Le HTML possède aussi un élément textarea pour créer une zone de saisie plus grande. Dans XUL, vous pouvez utiliser l'élément textbox de la même façon -- deux éléments distincts ne sont pas nécessaires. Si vous mettez l'attribut multiline à la valeur true, le champ de saisie de texte affichera plusieurs lignes.

Par exemple :

Exemple 2.4.2 : Source Voir

<textbox multiline="true"
           value="Voici du texte qui pourrait s'étaler sur plusieurs lignes."/>

Comme avec la balise textarea du HTML, vous pouvez utiliser les attributs rows et cols pour définir la taille. Ils vous permettent d'ajuster le nombre de lignes et de colonnes de caractères à afficher.

<label value="Chercher :" control="find-text"/>
<textbox id="find-text"/>

<button id="find-button" label="Rechercher"/>

Les cases à cocher et les boutons radio

Deux éléments supplémentaires sont utilisés pour la création des cases à cocher et des boutons radio. Ce sont des variantes de boutons. La case à cocher est utilisée pour des options qui peuvent être activées ou désactivées. Les boutons radio peuvent être utilisés dans un but similaire quand il y a un ensemble de boutons où un seul d'entre eux peut-être sélectionné à la fois.

Vous pouvez employer la plupart des attributs des boutons avec les cases à cocher et les boutons radio. L'exemple ci-dessous montre des cases à cocher et boutons radio simples.

<checkbox id="case-sensitive" checked="true" label="Sensible à la casse"/>
<radio id="orange" label="Orange"/>
<radio id="violet" selected="true" label="Violet"/>
<radio id="yellow" label="Jaune"/>

La première ligne crée une simple case à cocher. Quand l'utilisateur clique sur la case à cocher, son état coché et décoché s'inverse. L'attribut checked peut être utilisé pour indiquer l'état par défaut. Il vous faudra l'initialiser soit à true, soit à false. L'attribut label peut être utilisé pour ajouter un libellé qui apparaitra à côté de la case à cocher. Pour les boutons radio, vous utiliserez l'attribut selected à la place de l'attribut checked. Initialisez le à true pour avoir un bouton radio sélectionné par défaut, ou ne le mettez pas pour les autres boutons radio.

Élement radiogroup

Pour grouper des boutons radio ensemble, vous devez utiliser l'élément radiogroup. Un seul bouton radio peut-être sélectionné dans un radiogroup. Cliquez sur l'un deux désélectionnera tous les autres du même groupe. C'est ce que démontre l'exemple suivant.

Exemple 2.4.3 : Source Voir

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="Jaune" label="Jaune"/>
</radiogroup>

Attributs

Comme pour les boutons, les cases à cocher et les boutons radio sont constitués d'un libellé et d'une image, où l'image change en fonction de l'état coché ou décoché. Les cases à cocher ont certains attributs communs aux boutons :

label

Le libellé de la case à cocher ou du bouton radio.

disabled

Mettez la valeur à true ou à false pour désactiver ou activer la case à cocher ou le bouton radio.

accesskey

La touche clavier pouvant être utilisée comme raccourci pour sélectionner l'élément. La lettre spécifiée est habituellement soulignée dans le libellé.

Dans la prochaine section, nous allons voir quelques éléments pour la création de boîtes de listes.