XUL comprend deux éléments servant aux entrées de valeurs ou de plages numériques, ainsi que de deux éléments pour la saisie des dates et heures. Ces éléments ne sont disponibles que dans Firefox 3 et suivant.
Champs numérique
Une boîte de texte peut servir à la saisie de nombres en lui définissant un attribut type avec la valeur number. Ce type de boîte ne peut servir que pour entrer des nombres. Tout autre caractère tapé ne sera pas accepté et sera ignoré. De plus, des flèches apparaitront à côté de la boîte de texte pour permettre à l'utilisateur de faire défiler les valeurs.
Comme avec les autres boîtes de texte, la valeur par défaut peut être définie avec l'attribut value. Naturellement, cette valeur doit être un nombre. Toutefois, les valeurs minimale et maximale peuvent être définies avec les attributs min et max. S'ils sont précisés, vous pouvez contrôler l'intervalle de valeurs permis par la boîte de texte. Si l'utilisateur tente d'entrer une valeur inférieure ou supérieure à cet intervalle, elle sera réinitialisée avec le minimum ou le maximum. Par exemple, la boîte de texte suivante a un intervalle de 1 à 20.
<textbox type="number" min="1" max="20"/>
Comme la valeur par défaut n'est pas définie, la boîte aura la valeur 1, la valeur minimum. L'attribut min est défini à 1 pour indiquer la plus petite valeur possible, et l'attribut max est défini à 20 pour indiquer la plus grande valeur possible. Si la valeur minimale n'est pas définie, elle aura une valeur par défaut de 0. La valeur maximale par défaut est la valeur spéciale Infinity signifiant qu'il n'y a aucune limite.
Autres attributs des champs numériques
L'attribut increment peut servir à spécifier de combien est modifiée la valeur lorsque les flèches sont pressées. La valeur par défaut est 1, mais une valeur différente permettra au nombre de changer d'une plus grosse valeur. L'exemple suivant effectue des écarts de multiples de 10.
<textbox type="number" increment="10" max="100"/>
Cette boîte de texte change par multiples de 10 de 0 à 100. Comme l'attribut min n'a pas été défini, sa valeur par défaut est 0. Notez que l'utilisateur peut parfaitement entrer une autre valeur. L'attribut increment n'affecte que les flèches. L'utilisateur peut également incrémenter ou décrémenter la valeur en utilisant les flèches haut et bas du clavier lorsque la boîte de texte à le focus.
L'attribut decimalplaces indique le nombre de décimales à afficher. La valeur par défaut est 0, ce qui signifie que la boîte n'affiche que des entiers. Une valeur différente permet d'afficher des nombres décimaux.
<textbox type="number" decimalplaces="2"/>
Dans cet exemple, deux chiffres après la virgule sont affichés. Les valeurs comportant d'autres décimales sont arrondies à 2 chiffres après la virgule.
Échelles de valeurs
Un élément scale peut également être utilisé pour sélectionner une plage de valeurs. Plutôt que d'avoir une boîte de texte, un curseur glissant est utilisé. L'utilisateur peut déplacer le curseur de l'échelle pour ajuster la valeur.
La plupart des attributs de la boîte de texte numérique peuvent servir avec une échelle : value, min, max et increment peuvent servir de la même façon. L'échelle de valeur n'affiche en fait aucune valeur, mais peut le faire grâce à un script. Une échelle déclenche un événement change à chaque fois que sa valeur est modifiée.
<scale value="40" min="1" max="50"/>
La valeur par défaut de cette échelle est 40, et elle a une plage comprise entre 1 et 50.
Une boîte de texte numérique est employée généralement lorsque la valeur est importante pour l'utilisateur, comme un champs pour saisie un nombre de jours ou la taille maximale d'un fichier. Une échelle de valeur servira plutôt lorsque la valeur n'est pas très importante, comme l'augmentation ou la diminution d'un état, par exemple pour le volume sonore ou un zoom.
La disposition par défaut d'une échelle est horizontale avec à gauche les valeurs les plus basses et à droite, les plus hautes. Vous pouvez toutefois modifier cette orientation avec les attributs orient et dir.
<scale orient="vertical" dir="reverse"/>
Cette échelle de valeurs s'affichera verticalement avec les valeurs les plus basses en bas, et les plus élevées en haut.
Champs de saisie de date et heure
Les éléments datepicker et timepicker permettent à l'utilisateur d'entrer des dates et des heures. À leur utilisation, ils affichent une série de boîtes de texte numérique pour entrer chaque composants de la date et de l'heure.
<datepicker value="2004/3/24"/> <timepicker value="15:30:00"/>
L'attribut value permet de définir la valeur par défaut ; et si cet attribut est omis, le champ sera initialisé avec la date et l'heure courante. Le format de l'attribut est exactement comme ci-dessus, c'est-à-dire que les dates sont de la forme YYY/MM/DD et les heures sont de la forme HH:MM:SS (bien que les secondes et les autres colonnes peuvent être omises).
Ces deux éléments garantissent que l'utilisateur a bien entré une valeur date et une heure. De cette manière, vous n'avez pas à vous soucier qu'il s'agit d'une date valide, en vérifiant que le jour n'est pas supérieur au nombre de jour dans le mois, en gérant les années bissextiles, et ainsi de suite.
Tandis que timepicker ne possède qu'un seul style, datepicker possède trois variations différentes. Le style par défaut affiche trois champs pour l'année, le mois et le jour. L'attribut type permet de choisir les deux autres. Une valeur de grid utilise une grille de calendrier, comme affichée dans l'image ci-dessous.
Vous pouvez également utiliser la valeur popup pour créer une combinaison des deux types. Ce type a trois champs pour entrer l'année, le mois et la date, ainsi qu'un bouton pour afficher un calendrier surgissant pour choisir un jour.
<datepicker type="popup"/>