XUL には、数値や数の範囲の入力に使用するための要素が 2 つあり、 日付や時刻の入力に使用する要素も 2 つあります。 これらの要素は、Firefox 3 かそれ以降でのみ利用できます。
数値入力欄
テキスト入力欄 (textbox)の type 属性に、値 number を設定することで、数値を入力するために利用できるようになります。
このタイプのテキスト入力欄は、数値の入力だけに使用することができます。
それ以外の文字は許可されないため、入力しようした場合は単純に無視されます。
加えて、利用者が選択可能な値を循環させることができるように、矢印ボタンが入力欄の横に表示されます。
これ以外のテキスト入力欄と同様に、value 属性によってデフォルト値を指定することが可能です。
当然ではありますが、ここに指定する値は数値である必要があります。
また、min と max 属性によって、最大値と最小値を指定することも可能です。
これらの値を設定することで、欄に入力可能な値の範囲を制御することが可能になります。
もしも利用者が範囲よりも大きいか小さい値を入力しようとした場合は、必要に応じて最大値か最小値にリセットされることになるはずです。
例えば、以下の数値入力欄は 1 から 20 の間の範囲を持ちます。
<textbox type="number" min="1" max="20"/>
上例では、デフォルト値が指定されていないため、デフォルト値は選択範囲の最小の値である 1 になります。
また、min 属性に 1 を設定することで、設定できる値の下限が 1 であることを示し、
max 属性に 20 を設定することで、値の上限が 20 であることを示しています。
なお、最小値を指定しない場合、デフォルトの最小値は 0 になり、最大値を指定しない場合は、制限がないことを示す特殊な値である Infinity がデフォルトになります。
その他の数値入力欄の属性
increment 属性は、矢印を押した場合に値を変化させる量を指定するために使用されます。
この値のデフォルトは 1 であるため、それ以外の値を指定すれば、より大きな量で数値を変化させることが可能になります。
例えば、以下の例は 10 の倍数単位で増減します。
<textbox type="number" increment="10" max="100"/>
この入力欄は、0 から 100 までを 10 の倍数単位で増減します。
min 属性が設定されていないため、デフォルトの 0 になっています。 この例のような場合でも、利用者が直接キーボードから入力すれば、それ以外の値も入力可能であることに注意してください。
increment 属性は、矢印ボタンに対してのみ影響を与えます。
もしくは、利用者がカーソルキーの上下を、入力欄にフォーカスがあるときに使用する場合には、increment の値単位で値が増加または減少します。
また、decimalplaces 属性によって、小数点以下を何桁表示するかを示すことができます。
デフォルト値は 0 で、これは整数のみを表示することを意味します。
0 以外の値を指定すれば、小数を表示することができるようになります。
<textbox type="number" decimalplaces="2"/>
この例では、小数点以下は、2 桁まで表示されます。 小数点以下の桁数がそれより多い場合には、2 桁で丸められます。
スケール
scale 要素も、値を範囲の中から選択するのに使用できます。
この要素では、入力欄の代わりにスライドするスケールが使用されます。
利用者は、スケールのつまみをドラッグすることで、値を調整できます。
多数の数値入力欄と同じ属性が、スケールに対しても使用できます。
value、 min、 max と increment は、すべて類似の流儀で利用可能です。
スケールは、実際には数値として値を表示しませんが、値はスクリプトから使用できます。
スケールの値が変更された場合には、常に change イベントがスケールから送出されることになります。
<scale value="40" min="1" max="50"/>
このスケールのデフォルトは 40 で、範囲は 1 から 50 です。
通常、数値入力欄は利用者にとって値が重要である場合、 例えば、日数を入力する欄や、ファイルの最大サイズといったものに対して使用します。 対して、スケールは、スケールのスライド操作に応じて状態が増加または減少しさえすれば、実際の値は重要でない場合、 例えば、ボリュームスライダーや、ズームレベルといったものに対して使用します。
デフォルトでは、スケールは水平 (horizontal)に、左側が小さく、右側が大きくなるように配置されますが、
方向 (縦横) は、orient 属性で、大小の向きは dir 属性で変更することが可能です。
<scale orient="vertical" dir="reverse"/>
このスケールは、垂直 (vertical)で、低い値が下に、高い値が上になるように表示されることになるはずです。
日付と時刻の入力欄
datepicker と、timepicker 要素は、利用者に日付と時刻を入力させるために使用できます。
利用者に対しては、日付と時刻を構成する数値を入力するために、それぞれに対する数値入力欄が表示されます。
<datepicker value="2004/3/24"/> <timepicker value="15:30:00"/>
value 属性は、デフォルト値を設定するために使用されます。
この属性が省略された場合は、欄は現在の日付か時刻で初期化されることになります。
なお、この属性の書式は、厳密に上記のようにする必要があります。
つまり、日付は YYYY/MM/DD の形式で、時刻は HH:MM:SS の形式です。(ただし、秒とその直前のコロンは省略可能です)
これらの 2 つの要素により、利用者に対して日付や時刻の入力を確実に行わせることができます。 これらを利用する場合には、アプリケーション側での日付の妥当性確認は行う必要がありません。 この要素では、確実に日付がその月の日数を越えないことや、うるう年の取り扱いなどが行われます。
現時点では、timepicker は 1 つのスタイルしかありませんが、datepicker は 3 つのバリエーションがあります。
デフォルトのスタイルは、年と月および日を入力するための 3 つの欄を表示します。
それ以外の 2 つを選択するためには type 属性を使用します。
ここに、値 grid を指定すると、以下のイメージで示すようなグリッド形式のカレンダーが使用されます。
また、値 popup を使用すれば、先述の 2 つのタイプを組み合わせたようなスタイルになります。
このタイプは、日付を選択するためのグリッド形式のカレンダーをドロップダウンボタンでポップアップ表示させるだけでなく、
年と月および日を入力するための 3 つの欄も持っています。
<datepicker type="popup"/>