Все виджеты ZForms создаются на основе соответствующих им HTML-элементов. Признак, по которому определяется что элемент является базовым для виджета — наличие CSS-класса zf.
Многие виджеты распознаются из контекста, другим же может потребоваться указание дополнительного (помимо zf) CSS-класса, например, виджет контейнера может быть распознан по имени тэга HTML-элемента — <fieldset class="zf" />, виджет текстового поля — по атрибуту type: <input class="zf" type="text" />, а виджету даты необходимо указание дополнительного класса zf-date — <input class="zf zf-date" type="text" />.
В описании каждого типа виджета указано какие именно атрибуты должны быть указаны, чтобы при инициализации он был корректно распознан.
Дополнительно, у виджета может быть еще один элемент — «классовый» элемент (в примерах раздела он обозначен как oClassElement), которому будут назначаться CSS-классы, отвечающие за его состояние (например: zf-required, zf-invalid). В некоторых случаях, например, контейнера виджетов — он совпадает с базовым элементом виджета.
При необходимости дополнительные параметры инициализации виджета и зависимости указываются прямо в разметке формы с помощью следующего способа — у элемента виджета указывается атрибут onclick, в который записываются все необходимые параметры, например:
<input class="zf zf-number" id="input-count" name="count" type="text" size="30" onclick="return { oOptions : { bNegative : true } }" />Параметр oOptions — объект содержащий необязательные, дополнительные параметры инициализации виджета. Набор возможных дополнительных параметров зависит от типа виджета.
Помимо oOptions могут присутствовать и другие параметры, например, описывающие зависимости виджета.