UI виджет JavaScript Form

Webix Form поможет вам легко получить важные данные от пользователей. Форма - это контейнер для контролов, например, полей ввода (виджеты Text и Textarea), полей выбора (select), чекбоксов, радиокнопок и прочих кнопок ('Подтвердить', 'Отменить' и т.д.).

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Webix Form позволяет проверять данные перед отправкой на сервер. Поля с неправильными данными выделяются красным цветом.

Элементы виджета Form можно группировать. Например, можно отделить поля для личных данных от других полей.

Комбинируя Form с другими виджетами Webix, вы можете создавать сложные формы из нескольких страниц.

Валидация данных

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

Нажмите на 'Submit'

Привязка формы с List и другим виджетам для данных

Виджет Form можно использовать для редактирования данных в других виджетах. Например, вы можете привязать форму к Webix List. Когда пользователь кликнет по элементу списка, форма автоматически заполнится данными из него. Пользователи смогут изменить данные в полях формы и сохранить изменения в списке в один клик по кнопке.

Кликните по любому элементу списка

Текстовые поля

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

Текстовые поля с форматированием

Вы можете определять маски для форматирования данных (номеров телефонов, кредитных карт, дат) и устанавливать правила для валидации данных.

Группы полей

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

Многостраничные формы

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

HTML form

Если у вас уже есть готовые HTML формы и вы не хотите переписывать их под Webix Form, вы можете использовать виджет HTMLForm. Благодаря этому, вы сможете использовать HTML код без изменений и пользоваться при этом Webix Form API. Вы сможете получать доступ к данным в форме, проверять их, используя правила HTML и привязывать HTML Form к любому Webix виджету для данных.