XUL_教程/输入控件

文本输入框

HTML有一个输入元素可以用于文本输入操作。 XUL 有一个相似的元素, textbox, 用于文本输入。不用任何属性, textbox 元素创建一个框让用户可以输入文本。文本框具有像HTML的输入操作相同的许多属性。下面列出其中一部份：

id: 控件的唯一性标识。
class: 输入框的样式。
value: 如果你要输入框显示一个默认值，可以指定此属性。
disabled: 如果需要禁用文本输入框可以将这个属性设为true。
type: 你可以将这个属性的值设为password, 创建一个输入框隐藏用户的输入内容。通常用于密码输入框。
maxlength: 输入框允许输入的字符最大数量。

注解：在HTML里, 使用input元素区分几个不同类型的字段，在XUL里用每种类型对元素进行区分。

下面列出输入框的一些属性:

例1 : Source View

<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 例子创建的输入框仅仅可以输入一行文本。HTML也有一个textarea元素用来创建一个大的文本输入区域。在XUL，你可以使用textbox元素达到很好的效果 -- 这两种元素都不是很常用。如果你设置multiline属性为true，文本输入框将显示为多行。

例2 : Source View

<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 被点击后输入框被选中。

多选和单选按钮

另外两个元素是用于创建多选输入框和单选按钮。它们是按钮的变体。多选输入框元素(checkbox element)有多个选择项，可以被选或不选。单选按钮的用法相似，它有一个集合并且只能选择其中之一。

你可以像使用按钮的属性一样使用多选输入框和单选按钮。下面的例子向你展示一些简单的多选输入框和单选按钮。

<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 按钮，你可以使用 selected 属性代替 checked 属性。设置它的值为 true 让默认选中其中的一个单选按钮，或者不选中其他的单选按钮。

单选项组元素

为了把单选按钮组合在一起，你需要用到radiogroup 元素。在单选按钮组中同一时间只允许其中的一个单选按钮被选中。在其中的一个中点击将会把同一组中的其他按钮都设成关闭。下面的例子很好地示范了这一点。

例3 : Source View

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

属性

像按钮一样，多选框和单选按钮可以用文本标签和图片进行包装，当它被按下时通过切换图片来表达选中或没选中。多选项有很多与按钮相同的属性:

label: 在多选项或单选按钮上的文本标签。
disabled: 设为true 或 false 去禁用或启用多选项或单选按钮。
accesskey: 用于选中元素的快捷键。字母会在标签中以下划线显示。

到目前为止文件查找的例子 : Source View

在下一节，我们将可以看到一些适用于输入和选择数值的元素。