Ajax JavaScript CSS HTML 5 DOM

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.