Les champs de saisie

 

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 :

var el = env.locale; Exemple 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 :

var el = env.locale; Exemple 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.

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.

Source Voir

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

<button id="find-button" label="Rechercher"/>
Image:xultu_inputs1.png

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'attribut control 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.

var el = env.locale; Exemple 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.

Pièces jointes

Fichier Taille Date Joint par
xultu_inputs1.png
6097 octets 2007-08-14 07:49:14 Fredchat
grids1.png
5751 octets 2006-11-15 14:10:42 Morishoji

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : Delapouite, Pixel-it, Fredchat, Chbok
Dernière mise à jour par : Delapouite,