Новый генератор форм — Webix Form Builder

Одной из самых скучных задач в веб-разработке считается создание формы. Сегодня практически любое веб-приложение содержит по крайней мере одну форму. Процесс постоянного создания новых форм не особо воодушевляет. Поэтому мы создали генератор форм Form Builder.

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

Webix Form Builder Tool

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

Ниже вы видите группу контролов, которые задают лайаут формы. Нажав на кнопку “Generate”, вы увидите предварительный вид будущей формы.

Если вы хотите настроить какие-либо детали формы, кликните по любому инпуту и отредактируйте его свойства в списке свойств. С помощью списка свойств вы можете изменить тип инпута, его размер, дефолтное значение, плейсхолдер, название, и другие свойства.

form builder property sheet

Чтобы получить финальный вариант кода, кликните на таб в генераторе форм “Generated code”. Данный код имеет конфигурацию Webix UI в формате JSON, и может использоваться вместе с командой webix.ui, чтобы создать такой же пользовательский интерфейс, как тот, что вы видите в табе предварительного просмотра.

generated in form builder code

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

enjoy hint in webix form builder

Мы надеемся, что этот новый инструмент упростит процесс веб-разработки, освободив вас от рутины при написании кода.