Конструктор форм дает возможность делать вкладки многими способами. Вкладки могут быть реализованы на javascript, css, или их комбинации с использованием функционального поля customHtml. Очевидно, QuickForm был бы не quick, если бы не предлагал готовый виджет для рутинного интерфейса. На самом деле, в компоненте есть два пути реализации вкладок, и эти пути ведут к двум разным по функционалу результатам.
Ниже можно посмотреть два примера, которые внешне мало отличаются друг от друга. Однако между ними есть существенная разница.
Первый пример сделан при помощи радио кнопок и связанных с ними зависимых полей. В этом случае форма включает только видимую часть, скрытые вкладки никаким образом в ней не участвуют. Соответственно, они не будут приходить на почту, рассчитываться калькулятором, в них не будут проверяться обязательные поля и так далее. Они даже не присутствуют в коде страницы.
Второй пример сделан при помощи виджета qftabs. В этом случае скрытые вкладки на странице присутствуют и являются частью формы. Например, если в скрытой вкладке есть незаполненное обязательное поле, то форма не будет отправлена. При отправке компонент переключит на проблемную вкладку и подсветит незаполненное поле.
В зависимости от требуемого результата можно применять либо первый, либо второй способ. Техническая реализация вкладок в компоненте никаких вопросов вызывать не должна. В первом случае используются радио кнопки. К ним привязываются зависимые группы полей. Затем делается доводка внешнего вида в css файле. Во втором случае всё аналогично, только вместо радио кнопок включается виджет вкладок.
Ниже приведу отличительные моменты компонента, которые отсутствуют в других реализациях вкладок.
1. Неограниченная вложенность вкладок друг в друга.
2. Поддержка всех виджетов компонента, в том числе зависимых полей и калькулятора.
3. Неограниченный дизайн, который настраивается при помощи только css.
4. Проверка обязательных полей в невидимых вкладках с переключением на проблемную.
5. Возможность использовать элементы формы. При этом вкладки могут быть как частью формы, так и ее общим контейнером.
6. Быстрое и удобное наполнение и вывод на сайт. Компактная реализация по коду.