Features
This page contains structured information that will help you to start working with DHTMLX Form and go into deep dive on its functionality.
How to start with DHTMLX Form
In this section you can find out how to initialize and localize Form, how to add controls inside a Form and how to integrate a Form into your applications.
Initialization and localization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Form (Example) |
| All controls | The example shows how to initialize a Form with all available controls |
| Localization | Learn how to localize a Form (Example) |
Form controls
| Topic | Description |
|---|---|
| Button | Learn how to add a Button control into a Form (Example) |
| Date picker | Learn how to add a DatePicker control into a Form (Example) |
| Checkbox | Learn how to add a Checkbox group control into a Form (Example) |
| Checkbox group | Learn how to add a Checkbox control into a Form (Example) |
| ColorPicker | Learn how to add a ColorPicker control into a Form (Example) |
| Combobox | Learn how to add a Combobox control into a Form (Example) |
| Container | Learn how to add a Container control into a Form (Example) |
| Input | Learn how to add an Input control into a Form (Example) |
| Labels | The example shows how to add labels for controls |
| Helpers | The example shows how to add a help message for a control |
| Radio group with Radio buttons | Learn how to add Radio buttons into a Form (Example) |
| Select | Learn how to add a Select control into a Form (Example) |
| SimpleVault | Learn how to add a SimpleVault control into a Form (Example) |
| Slider | Learn how to add a Slider control into a Form |
| Spacer | Learn how to add a Spacer control into a Form |
| Text | Learn how to add a Text control into a Form |
| Textarea | Learn how to add a Textarea control into a Form (Example) |
| TimePicker | Learn how to add a TimePicker control into a Form (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Form with React (Demo) |
| Angular integration | Learn how to use DHTMLX Form with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Form with Vue.js (Demo) |
How to configure Form
In this section you will know how to configure groups of controls, how to align controls and add paddings between them, how to initialize a disabled or hidden Form.
| Topic | Description |
|---|---|
| Grouping controls | Learn how to group Form controls into rows and columns |
| Configuring padding | Learn how to set padding for content inside the control group |
| Setting a title | Learn how to define a title for the control group |
| Making Form disabled | Learn how to initialize a disabled Form (Example) |
| Making Form hidden | Learn how to initialize a hidden Form |
| Aligning controls | Learn how to configure the alignment of controls in Form (Example) |
| Changing Form configuration | The example allows you to change the configuration settings of a Form right from UI |
How to configure validation and work with it
In this section you will learn how to configure required fields, to add validation for number values, to limit the number of characters entered in the input field, and more.
| Topic | Description |
|---|---|
| Configuring required fields | Learn how to specify that the input field is required to be filled in by the user (Example) |
| Defining restricted values | Learn how to specify the minimum and/or maximum values allowed in the input |
| Setting allowed length of input values | Learn how to limit the number of characters entered in an input or textarea field |
| Validation rules | Learn how to specify the rules of validation (Example) |
| Configuring messages | Learn how to show messages that will notify the end users, whether they are filling the form in correctly (Example) |
| Validating Form | Learn how to validate the whole form (Example) |
| Validating a separate control | Learn how to validate a separate control (Example) |
How to customize Form and change its size
In this section you can learn how to configure the size and style of Form and its controls.
| Topic | Description |
|---|---|
| Width and height of Form | Learn how to set the width and height for Form |
| Styling Form | Learn how to customize a Form and its controls (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with Form
In this section you will study how to send a Form to the server, how to disable and enable the Form, hide and show it, how to clear the Form values and validation.
| Topic | Description |
|---|---|
| Sending Form to server | Learn how to send a Form to the server |
| Disabling / enabling Form | Learn how to enable/disable a Form (Example) |
| Is disabled | Learn how to check whether a Form or its control is disabled (Example) |
| Hiding / showing Form | Learn how to hide/show a Form |
| Checking visibility of a Form | Learn how to check whether a Form or its control is visible |
| Using input masks | Learn how to use pattern and input masks to provide entering of values in a predefined way (Example 1, Example 2) |
| Clearing Form | Learn how to clear the values and (or) validation of Form (Example) |
How to work with Form controls
In this section you will study how to get access to the object of the control, how to disable and enable a separate control, how to clear the values and validation of a control, how to operate with properties of controls and their values.
| Topic | Description |
|---|---|
| Getting an item | Learn how to get access to the own methods and events of a control (Example) |
| * Disabling/enabling a control | The example shows how to enable/disable a separate control |
| * Clearing a control | The example shows how to clear a separate control |
| * Clearing validation of a control | The example shows how to clear validation of a separate control |
| * Getting widget of control | The example shows how to return the object of the related DHTMLX widget of the control and apply the methods of the widget to the control |
| * Check all available methods and events for each control | Button, DatePicker, Checkbox, CheckboxGroup, ColorPicker, Combo, Container, Input, RadioGroup, Select, SimpleVault, Slider, Spacer, Text, Textarea, TimePicker |
| Iterating over controls | Learn how to iterate over Form controls (Example) |
| Setting focus on control | Learn how to set focus on a control via Form API (Example) |
| Setting value | Learn how to set new values or states for Form controls (via Form API), (via Form control API) |
| Getting value | Learn how to get current values/states of Form controls (via Form API), (via Form control API) |
| Setting properties | Learn how to change the values of the properties of Form controls (Example) |
| Getting properties | Learn how to return an object with the properties which are set for Form controls (Example) |
How to work with Form events
This section explains how to work with Form events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Form events (Example) |
API reference
In this section you can find out corresponding references of Form and Form controls API.
Form API
| Topic | Description |
|---|---|
| Form methods | Check the list of Form methods |
| Form events | Check the list of Form events |
| Form properties | Check the list of Form properties |
Form controls API
| Topic | Description |
|---|---|
| Button API | Check the API of the Button control of Form |
| Datepicker API | Check the API of the Datepicker control of Form |
| Checkbox API | Check the API of the Checkbox control of Form |
| CheckboxGroup API | Check the API of the CheckboxGroup control of Form |
| Colorpicker API | Check the API of the Colorpicker control of Form |
| Combo API | Check the API of the Combo control of Form |
| Container API | Check the API of the Container control of Form |
| Input API | Check the API of the Input control of Form |
| Radiogroup API | Check the API of the Radiogroup control of Form |
| Select API | Check the API of the Select control of Form |
| Simple Vault API | Check the API of the Simple Vault control of Form |
| Slider API | Check the API of the Slider control of Form |
| Spacer API | Check the API of the Spacer control of Form |
| Text API | Check the API of the Text control of Form |
| Textarea API | Check the API of the Textarea control of Form |
| Timepicker API | Check the API of the Timepicker control of Form |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with Form.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!