入力コントロール

テキスト入力欄

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

id 

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

class 

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

value 

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

disabled 

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

type 

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

maxlength 

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

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

例 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 multiline="true"
           value="This is some text that could wrap onto multiple lines."/>

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

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

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

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

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

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

ここまでのファイル検索ダイアログの例  : ソース 表示

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

チェックボックスとラジオボタンを作成するための 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>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="yellow" label="Yellow"/>
</radiogroup>