Features
This page helps you start working with DHTMLX Form and explore its functionality in depth.
How to start with DHTMLX Form
In this section you will learn how to initialize and localize a Form, add controls to it, and integrate it 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 to a Form (Example) |
| Date picker | Learn how to add a DatePicker control to a Form (Example) |
| Checkbox | Learn how to add a Checkbox control to a Form (Example) |
| Checkbox group | Learn how to add a CheckboxGroup control to a Form (Example) |
| ColorPicker | Learn how to add a ColorPicker control to a Form (Example) |
| Combobox | Learn how to add a Combobox control to a Form (Example) |
| Container | Learn how to add a Container control to a Form (Example) |
| Input | Learn how to add an Input control to 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 to a Form (Example) |
| Select | Learn how to add a Select control to a Form (Example) |
| SimpleVault | Learn how to add a SimpleVault control to a Form (Example) |
| Slider | Learn how to add a Slider control to a Form |
| Spacer | Learn how to add a Spacer control to a Form |
| Text | Learn how to add a Text control to a Form |
| Textarea | Learn how to add a Textarea control to a Form (Example) |
| TimePicker | Learn how to add a TimePicker control to a Form (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use the DHTMLX Optimus framework to build DHTMLX-based apps (the recommended framework for 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 learn how to configure groups of controls, align controls, add paddings between them, and 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 a control group |
| Setting a title | Learn how to define a title for a 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 Form configuration settings from the UI |
How to configure validation and work with it
In this section you will learn how to configure required fields, add validation for number values, limit the number of characters entered in an input field, and more.
| Topic | Description |
|---|---|
| Configuring required fields | Learn how to make an input field required (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 tell users whether they are filling in the form 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 will learn how to configure the size and style of a 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 | The CSS classes included in the DHTMLX library |
How to work with Form
In this section you will learn how to send a Form to the server, disable and enable it, hide and show it, and clear 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 control how users enter values (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 learn how to access the control object, disable and enable a separate control, clear control values and validation, and work with control properties and their values.
| Topic | Description |
|---|---|
| Getting an item | Learn how to access 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 DHTMLX widget object related to a control and apply the widget methods to that 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 that are set for Form controls (Example) |
How to work with Form events
In this section you will learn how to work with Form events.
| Topic | Description |
|---|---|
| Event basic rules | Learn the basic rules of event handling |
| Event handling | Learn how to attach, detach, or call Form events (Example) |
API reference
In this section you will find the Form API and Form controls API references.
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 |
| Datepicker API | Check the API of the DatePicker control |
| Checkbox API | Check the API of the Checkbox control |
| CheckboxGroup API | Check the API of the CheckboxGroup control |
| Colorpicker API | Check the API of the ColorPicker control |
| Combo API | Check the API of the Combo control |
| Container API | Check the API of the Container control |
| Input API | Check the API of the Input control |
| Radiogroup API | Check the API of the RadioGroup control |
| Select API | Check the API of the Select control |
| Simple Vault API | Check the API of the SimpleVault control |
| Slider API | Check the API of the Slider control |
| Spacer API | Check the API of the Spacer control |
| Text API | Check the API of the Text control |
| Textarea API | Check the API of the Textarea control |
| Timepicker API | Check the API of the TimePicker control |
Common functionality
In this section you will learn about common library functionality that is useful when you work 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 run code after the component renders |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!