入力コントロール

XUL にも、HTML のフォームコントロールと同様な要素があります。

テキスト入力欄

HTML には、テキスト入力をコントロールするために使用可能な input 要素があります。 XUL にも、テキスト入力のための同様な要素として、textbox 要素があります。 textbox 要素は、何も属性を指定しなくとも、利用者がテキストを入力するためのボックス (テキスト入力欄) を作りますが、 textbox 要素に対しても、HTML の入力コントロールで使われるものと同様の属性が使用できます。 以下に、主な属性を示します。

id 

テキスト入力欄を識別するための一意な識別子。

class 

テキスト入力欄のスタイルクラス。

value 

テキスト入力欄にデフォルトのテキストを指定したい場合、value 属性で指定します。

disabled 

テキスト入力欄を無効にしたい場合、true を設定します。

type 

この属性に、特別な値 password を設定することで、入力した内容を伏せて表示するテキスト入力欄を作成することが出来ます。これは通常、パスワード入力欄に使用されます。

maxlength 

テキスト入力欄に入力可能な最大文字数。

HTML では、種類の異なる入力欄を input 要素で作ることができましたが、 XUL では、種類ごとに別々の要素が用意されています。 以下に、テキスト入力欄の例をいくつか示します。

var el = env.locale; 例 1 : ソース 表示

<label control="some-text" value="Enter some text"/>
<textbox id="some-text"/>
<label control="some-password" value="Enter a password"/>
<textbox id="some-password" type="password" maxlength="8"/>

複数行入力が可能な textbox

上の textbox の例では、1 行分のテキストだけが入力可能なテキスト入力欄が作成されます。 HTML では、より大きなテキスト入力領域を作成するために textarea 要素があります。 XUL では、同じ textbox 要素が使用できるため、別の要素は必要ありません。 multiline 属性を true に設定することにより、複数行の入力が可能なテキスト入力欄が表示されます。

var el = env.locale; 例 2 : ソース 表示

<textbox multiline="true"
           value="This is some text that could wrap onto multiple lines."/>

HTML の textarea と同様に、入力欄の大きさを設定するために rows と cols 属性が使用できます。 ここには、表示する行数と文字の桁数を指定します。

ファイル検索ダイアログの例

それでは、ファイル検索ダイアログに検索の入力欄を追加してみましょう。 textbox 要素を使用してみます。

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

<button id="find-button" label="Find"/>

これらの行を、以前のセクションで作成したボタンの前に追加します。 このウィンドウを開くと、画像で示したのと同様のものが表示されるはずです。

ラベルと入力欄がウィンドウに表示されることが確認できると思います。 入力欄は完全に機能しますので、テキストを入力したり、選択することが可能です。 control 属性の使用により、ラベル (label) がクリックされた時に入力欄が選択されることを確認してください。

var el = env.locale; ここまでのファイル検索ダイアログの例 : ソース 表示

チェックボックスとラジオボタン

チェックボックスとラジオボタンを作成するための 2 つの要素について説明します。 これらはボタンの一種です。 チェックボックスは、オプションを有効にするか無効かを設定するために使用されます。 ラジオボタンも同様の目的で利用されますが、一群のオプションの中から 1 つだけを選択する場合に用います。

ボタンに設定可能な属性の多くが、チェックボックスとラジオボタンにも使用できます。 下の例は、単純なチェックボックスとラジオボタンを示します。

<checkbox id="case-sensitive" checked="true" label="Case sensitive"/>
<radio id="orange" label="Orange"/>
<radio id="violet" selected="true" label="Violet"/>
<radio id="yellow" label="Yellow"/>

最初の行は単純なチェックボックス (checkbox) を作成します。 ユーザがチェックボックスをクリックすると、チェック状態と非チェック状態が切り替わります。 checked 属性は、デフォルトの状態を指定するのに使用します。 ここには true または false のいずれかの値を設定します。 label 属性によって、チェックボックスの横に表示されるラベルを設定することが出来ます。 ラジオボタン (radio) では、checked 属性の代わりに selected 属性を使用する必要があります。 デフォルトで選択されているラジオボタンに対して true を設定し、そのほかのラジオボタンでは、設定しないでおきます。

Radiogroup 要素

ラジオボタンをグループ化するためには、radiogroup 要素を使用する必要があります。 グループのラジオボタンは一度に 1 個しか選択できません。 1 つを選択すると、同じグループの他のものは選択されない状態になります。 下の例により、試すことができます。

var el = env.locale; 例 3 : ソース 表示

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="yellow" label="Yellow"/>
</radiogroup>

チェックボックスとラジオボタンの属性

ボタンと同様、チェックボックスとラジオボタンも、ラベルと画像よって構成されています。 画像は、クリックされたときのチェック状態と非チェック状態の切り替わりに応じて切り替わります。 チェックボックスに使用できる属性の多くは、ボタンと同じです。

label 

チェックボックスまたはラジオボタンのラベル。

disabled 

チェックボックスまたはラジオボタンの有効・無効を設定するために、true または false を設定します。

accesskey 

この要素を選択するためのショートカットキー。指定された文字は通常ラベルに下線付きで表示されます。

次のセクションでは、数値の入力や選択を行うための要素について見て行きます。