JavaScript Form UI widget

Overview

Webix Form allows validating input data before sending it to a server. This feature allows highlighting form fields that contain the incorrect data.

If needed, Form elements can be grouped. For example, you can visually separate fields that should contain personal info from all the others.

Combining Form with other Webix components, you can create complex forms that consist of several pages.

Validation

The Validation feature allows checking the correctness of data inserted by users. You can check whether a particular field is empty, contains a number or an email address. The field with the incorrect data will be highlighted. Optionally, you can display a message to inform a user that the inserted data is invalid.

Form bound to list

Form can be used for editing data widgets. For instance, you can bind a form to Webix List. Then, the users will be able to click any list item and the related form will be filled with the item data automatically. Users will be able to change the data in the form fields and save the data back to the list with a single button click.

Text fields

You can use a simple text field or a field for entering a password. A password field will display dots instead of the entered characters.

Formatted text inputs

You can define a pattern for formatting particular text data (phone numbers, credit cards, dates) and set rules for field validation.

Fieldset and section

Particular form elements can be grouped by using Fieldset or Section. It allows separating logical parts of a form from each other. Using Fieldset, you can surround a group of form controls with a border and add a text label to it. When you divide form elements into sections, a border line with a text label is inserted between them. Fieldset and Section help to highlight the particular parts of your form.

Multiview form

In the case of a big and complex form, its sections can be placed into different tabs. Switching between tabs can be implemented with a Tabbar or Segmented button, or you can create the dedicated tabview with a form inside.

HTML form

If you have a ready-made HTML form and don’t want to turn it into a Webix Form, you can use the HTMLForm widget. With this widget, you can display a pure HTML form and upgrade it with Webix Form API. You can access form values, validate them with HTML rules and bind the HTML Form to any Webix data widget.