ZForms.Widget → ZForms.Widget.Container → ZForms.Widget.Container.Sheet
Виджет предназначен для создания многостраничных форм. Создается на основе элемента <fieldset> или любых других HTML-контейнеров.
Виджет определяется по дополнительному CSS-классу zf-sheet, например: <fieldset class="zf zf-sheet" />.
У текущей выбранной страницы должен быть назначен дополнительный CSS-класс zf-selected.
<form class="zf" action=".">
<fieldset class="zf zf-sheet zf-selected">
<legend><span>Контактные данные</span></legend>
<dl>
<dt><label for="input-first-name">Имя</label></dt>
<dd><input class="zf" type="text" name="first-name" id="input-first-name" /></dd>
</dl>
<dl>
<dt><label for="input-last-name">Фамилия</label></dt>
<dd><input class="zf" type="text" name="last-name" id="input-last-name" /></dd>
</dl>
<div class="zf-buttons"><input class="zf zf-buttonnext" type="button" value="следующая →" /></div>
</fieldset>
<fieldset class="zf zf-sheet">
<legend><span>Телефоны</span></legend>
<dl>
<dt><label for="input-phone">Домашний</label></dt>
<dd><input class="zf" type="text" name="phone" id="input-phone" /></dd>
</dl>
<dl>
<dt><label for="input-phone-mobile">Мобильный</label></dt>
<dd><input class="zf" type="text" name="phone-mobile" id="input-phone-mobile" /></dd>
</dl>
<div class="zf-buttons">
<input class="zf zf-buttonprev" type="button" value="← предыдущая" />
<input class="zf zf-buttonnext" type="button" value="следующая →" />
</div>
</fieldset>
<fieldset class="zf zf-sheet">
<legend><span>Дополнительные сведения</span></legend>
<dl>
<dt><label for="input-address">Адрес</label></dt>
<dd><input class="zf" type="text" name="address" id="input-address" /></dd>
</dl>
<dl>
<dt><label for="input-email">Эл. почта</label></dt>
<dd><input class="zf" type="text" name="email" /></dd>
</dl>
<div class="zf-buttons">
<input class="zf zf-buttonprev" type="button" value="← предыдущая" />
<input class="zf zf-submit" type="submit" value="Отправить" />
</div>
</fieldset>
</form>