В XUL есть элементы, которые подобны тем, что есть в  формах HTML.

Поля ввода текста

В HTML есть элементы ввода, которые могут быть использованы как элементы управления для ввода текста. В XUL есть подобные элементы, текстовые поля, используемые для ввода текста. Безо всех атрибутов текстовое поле создает область, в которой пользователь может ввести текст. Текстовое поле может содержать множество атрибутов как и в элементах ввода HTML. Далее некоторые из них:

id
Уникальные идентификатор, по которому Вы можете идентифицировать текстовое поле.
class
Класс стилей для текстового поля.
value
Если Вы хотите что бы текстовое поле содержало значение по умолчанию, то есть атрибут value.
disabled
Установите true и текстовое поле будет не активным.
textbox.type
Вы можете установить для этого атрибута значение password для создания текстового поля, которое будет скрывать то, что вводится. Оно обычно используется для ввода пароля.
maxlength
Максимальное количество символов, которое можно ввести в текстовое поле.

Заметим, что в HTML несколько разных видов полей могут быть созданы одним элементом ввода, в 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"/>

Многострочное текстовое поле

В примере выше, текстовое поле создавалось для вводи только одной строки текста. В HTML еще есть элемент textarea для создания больших зон ввода текста. В XUL Вы можете использовать текстовое поле для решения этой цели — два разных элемента не нужны. Если Вы установите в атрибут multiline значение true, то в текстовом поле будет показано несколько строк.

Пример 2 :

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

Как и textarea из HTML, Вы можете использовать атрибуты rows и cols для установки размеров. Через них может быть установлено количество строк и колонок, которые будут показаны.

Наш пример «поиск файлов»

Давайте добавил поле поиска к диалогу поиска файлов. Мы используем поле ввода.

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

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

Эти строки мы добавили до кнопок, которые создали в предыдущем разделе. Если Вы откроете это окно, то увидите что-нибудь похожее тому, что изображено на картинке.

Заметим, что текстовая метка и поле ввода сейчас есть в окне. Текстовое поле полностью рабочее, и Вы можете ввести в него или выделить текст. Так же атрибут control позволяет выделить текстовое поле, когда щелкните по текстовой метке.

Галочка и переключатель

Два дополнительных элемента используются для создания галочек и переключателей. Это разные кнопки. Галочка используется для параметров, которые могут быть включены или выключены. Переключатель может быть использован для некоторых задач, когда надо выбрать только один параметр.

Вы можете использовать разные атрибуты для галочек и переключателей, как и у обычных кнопок. Для примера, внизу приведены простые галочка и переключатели.

<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"/>

Первая строка создаст простую галочку. Когда пользователь щелкает по галочке, то она переключается между «выбрано» и «не выбрано». Атрибут checked может использоваться для задания значения по умолчанию. Вы можете установить его как true или false. Атрибут label может быть использован для добавления текстовой метки, которая будет показана возле галочки. Для переключателя Вы можете использовать атрибут selected вместо атрибута checked. Установка его сделает переключатель выбранным по умолчанию, если позволят другие переключатели.

Группа переключателей

Для объединения переключателей в группы Вы можете использовать элемент radiogroup. Только один переключатель может быть выбран в группе переключателей. Щелчок на одном переключит остальные в выключенное состояние  в некоторой группе. Следующий пример демонстрирует это.

Пример 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
Короткое сочетание клавиш может быть использовано для выбора элемента. Определенная буква обычно подчеркнута в надписи.

Пример «Поиск файлов»:

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

<button id="find-button" label="Find" default="true"/>
<button id="cancel-button" label="Cancel"/>

В следующем разделе мы посмотрим как создавать числовые элементы ввода.