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.
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 :
<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 :
<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.
Notre exemple de recherche de fichiers
Maintenant, ajoutons un champ de saisie de recherche à la boîte de dialogue de recherche de fichiers. Nous allons utiliser l'élément textbox.
<label value="Chercher :" control="find-text"/>
<textbox id="find-text"/>
<button id="find-button" label="Rechercher"/>
Ajoutez ces lignes avant les boutons que nous avons créés dans la section précédente. Si vous ouvrez cette fenêtre, vous verrez quelque chose ressemblant à l'image ci-dessous.
Notez que le libellé et le champ de saisie de texte sont maintenant apparus dans la fenêtre. La boîte de texte est complètement fonctionnelle et vous pouvez taper et sélectionner du texte dedans. Notez aussi que l'attributcontrol a été utilisé. Ainsi, le champ de saisie est sélectionnée lorsque l'on clique sur son libellé.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.
<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.