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 Javascript form.
HTML and Javascript Form
Webix Form answers a question of how to create a form in HTML using Javascript 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 Javascript forms: Form widget and HTMLForm widgets. The former one is a pure Javascript 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 Javascript 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:
Buttons for clicking
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 (Javascript Toggle), a segmented button and clickable icons.
Text fields for typing
Apart from a standard text field, you will find similar inputs with autocompletion and autoformatting. There are also specific controls for searching (Javascript 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).
Selection controls for limiting user choice
No Javascript 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.
Helper controls to make the environment cute
You can organize space in your Javascript 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 Javascript 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 JavaScript List or JavaScript Table or even another Form can be put into your Javascript form.
Still, such a valuable addition has its own pros and cons. The FormInput deals only with a widget’s look-and-feel while embedding it into a form.
view:"form", id:"myform", elements:[
{ view:"text", label:"Team Name", name:"team" },
{ view:"forminput", label:"Members", body:{
view:"datatable", select:true, autoConfig:true
}}
]
});
$$("myform").setValues({ team:"My team" });
But the FormInput control cannot pass the widget’s data for processing it with Javascript 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:
name:"formgrid",
getValue:function(){
return this.serialize();
},
setValue:function(values){
this.clearAll();
this.parse(values);
}
}, webix.ui.datatable);
Now, you can safely provide the name property to a custom FormGrid widget and process its values within a parent form:
view:"form", id:"myform", elements:[
{ view:"text", label:"Team Name", name:"team" },
{ view:"forminput", label:"Members", name:"members", body:{
view:"formgrid", select:true, autoConfig:true
}}
]
});
$$("myform").setValues({
team:"My team",
members:[
{ fname:"Alex", lname:"Brown", email:"alex.brown@gmail.com" },
{ fname:"Julia", lname:"Welner", email:"juliaw@gmail.com" },
{ fname:"Maksim", lname:"Resvik", email:"resvik12@hotmail.com" }
]
});
You can check the live demo by the link.
Javascript Form Building Tools and Widgets
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.
All you need is to provide the names for text fields and change their properties – all by visual means. After that, you will just need to copy the resulting Form code and paste it into your application.
You can learn more about Form JS builder in the related blog article.
Form Editor
The library can also offer a specific widget for effortless editing of JSON data in the form. The widget called Form-Editor can create a form layout automatically based on the data you need to edit.
The tool is available as a free addition to the library’s commercial version and its source code is available in the Components repository on GitHub. For more information, please follow another blog write-up.
Conclusion
The possibilities of Webix forms are vast and can open the way to another article, but it is practice not speaking that makes perfect. Explore JavaScript Form controls, study its processing features and get ready for the summer with another breathtaking application made on Webix. See you!
