Label et textbox
HTML dispose d'un objet nommé input pour permettre à l'utilisateur
d'entrer des données mais l'équivalent XUL se nomme textbox.
Contrairement au HTML, textbox peut comporter plusieurs lignes dès
lors que l'attribut multiline est ajouté à la déclaration:
<textbox multiline="true" />
Attributs de textbox
multiline
Permet plusieurs lignes. On distinguera le nombre de lignes possibles et le nombre de lignes affiché qui dépend de l'attribut rows. Quand le premier excède le second, un ascenseur vertical apparait à droite.
rows
Nombre de lignes affiché au départ. Ce nombre n'est pas limitatif du nombre de lignes que l'on peut entrer. Noter qu'une ligne supplémentaire s'affiche en bas pour laisser place à l'ascenseur horizontal lorsque la longueur du texte dépasse la largeur du champ.
value
Autre attribut venant de HTML, indique le texte par défaut, affiché au départ dans le champ de texte.
maxlength
La taille du texte autorisé à l'intérieur du champ.
size
La largeur en nombre de caractères du champ de texte.
timeout
S'utilise en conjonction avec le type timed (voir plus bas).
Les types de textbox
Il existe quatre types de champs de texte. Outre le type ordinaire, trois autres peuvent être spécifié par l'attribut type:
autocomplete
Champ doté de la fonctionnalité d'auto-complétion.
password
Similaire à l'attribut HTML, un champ de mot de passe n'affiche pas les caractères en écho mais une étoile à la place.
timed
Utilisé en conjonction avec l'attribut timeout, il indique qu'un évènement doit être déclenché après un temp donné quand quelque chose est entré dans le champ de texte.
Label
La balise label s'utilise souvent en conjonction avec textbox, c'est une simple ligne de texte à afficher.
<label value="Mon texte affiché" />
La différence avec la balise description est que label peut être
lié à un autre composant grâce à l'attribut control
auquel on assigne le nom de ce composant.
Par exemple si un textbox a un identifieur "tb", l'attribut control
de label sera assigné de:
<label control="tb" value="Mon texte" />
Exemple
Exemple de champ d'entrée de texte avec une dimension d'une ligne au départ mais plusieurs permises pour le texte contenu.
<label control="tb" value="Entrer un texte:" /> <textbox id="tb" multiline="true" rows="1" size="40" value="vide" /> <button label="voir" oncommand="document.getElementById('tb').value);" />
Nous avons associé un bouton pour tester l'utilisation du texte entré
dans le champ, en l'occurrence on l'affiche dans une boite de message JavaScript.
L'accès au contenu du champ est obtenu avec le la méthode de
DOM getElementByID, ce qui est du code JavaScript classique. Nous verrons
l'emploi du DOM avec XUL dans un chapitre ultérieur.
- Démo: code.zip