Only good-looking and powerful tools for interacting with users can help developers conquer the modern web. Forms are true visitor cards of your application, as the positive experience during filling them adds a lot to user loyalty. Let’s find out how many carma points you can achieve by choosing Webix jаvascript form.

HTML and jаvascript Form
Webix Form answers a question of how to create a form in HTML using jаvascript in the best way. The library’s UI Form widget is a fully-featured tool that acts both as a container for numerous controls and as a processor for their values.

With our UI Form you can:

arrange input elements nicely;
set and get values of form elements in a scope;
validate form values with ready-made and custom functions;
parse server-side values into a form and save them back to server;
check form state and control focus within it.
The library offers two types of jаvascript forms: Form widget and HTMLForm widgets. The former one is a pure jаvascript Form with Webix controls as elements while the latter one is a wrapper for standard HTML inputs.

Like UI Form, the HTMLForm widget is supplied with form JS functions for getting and setting values, but its validation possibilities as well as the choice of controls is limited to HTML. So in this article we will speak about the UI Form widget only.

Form Controls and Input Types
The UI library offers a lot of jаvascript controls to aid data inputting and visualize it as much as possible. There are various button and input types alongside with select boxes and value pickers, so you will never get bored even at the planning stage:

Although the library’s blue button is the best-known, there’s still a lot to click and push: colored buttons, directional buttons, buttons with images and icons, a two-state button (jаvascript Toggle), a segmented button and clickable icons.

Apart from a standard text field, you will find similar inputs with autocompletion and autoformatting. There are also specific controls for searching (jаvascript Search) and collecting homogeneous text values (Multitext).

You may have a look at Textarea for placing a long text and, if you need to add styles to the typed text, there’s a dedicated rich textarea control (Richtext).

No jаvascript form can get without advanced selection controls, so this section will be the richest one. You may need to select.

Numbers. In this case Counter, Slider, and RangeSlider controls are appropriate;
Dates. Here we can offer Datepicker and DaterangePicker;
Colors. As you might have already guessed, it’s Colorpicker that comes to your help;
Just “yes” or “no”. Checkbox is an unchallenged leader in this area, so use the same-name control 🙂
Any text value. For a simple selection use Radio or Richselect and, if you need to type text in the input field, have a look at Combo;
Several text values. For a simple selection use Multiselect and, if you need to type text in the input field, take Multicombo.

You can organize space in your jаvascript form wisely by:

Dividing it into sections with a Template widget of a “section” type;
Placing same-purpose controls inside a Fieldset;
Providing tabs by combining a Tabbar control and a Multiview widget.
Some of the library controls like Text, Select, Radio and Checkbox are based on HTML inputs, while the majority is pure jаvascript form controls.

Any Webix Widget can be a Form Control
Such a loud title is about to make senseless the above part, but let’s examine this concept closer.

Starting from version 4.3 the framework adds a powerful FormInput widget that allows placing any Webix widget into a form by making it labellable and fitting form design. It means that any jаvascript List or jаvascript Table or even another Form can be put into your jаvascript form.

But the FormInput control cannot pass the widget’s data for processing it with jаvascript Form functions that set and get form values, unless this inner widget itself features the related setValue() and getValue() methods.

The Datatable doesn’t have such methods, but you can easily add them by creating a custom widget based on UI Datatable:

Form Builder
If you need to create a lot of simple forms, but are tired of routine monkey-style coding, you can have a look at Webix Form Builder visual tool that can generate the code for you.

Only for V.I.P