Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize a Form (Example)
All controlsThe example shows how to initialize a Form with all available controls
LocalizationLearn how to localize a Form (Example)

Form controls

TopicDescription
ButtonLearn how to add a Button control into a Form (Example)
Date pickerLearn how to add a DatePicker control into a Form (Example)
CheckboxLearn how to add a Checkbox group control into a Form (Example)
Checkbox groupLearn how to add a Checkbox control into a Form (Example)
ColorPickerLearn how to add a ColorPicker control into a Form (Example)
ComboboxLearn how to add a Combobox control into a Form (Example)
ContainerLearn how to add a Container control into a Form (Example)
InputLearn how to add an Input control into a Form (Example)
LabelsThe example shows how to add labels for controls
HelpersThe example shows how to add a help message for a control
Radio group with Radio buttonsLearn how to add Radio buttons into a Form (Example)
SelectLearn how to add a Select control into a Form (Example)
SimpleVaultLearn how to add a SimpleVault control into a Form (Example)
SliderLearn how to add a Slider control into a Form
SpacerLearn how to add a Spacer control into a Form
TextLearn how to add a Text control into a Form
TextareaLearn how to add a Textarea control into a Form (Example)
TimePickerLearn how to add a TimePicker control into a Form (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Form with React (Demo)
Angular integrationLearn how to use DHTMLX Form with Angular (Demo)
Vue integrationLearn 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.

TopicDescription
Grouping controlsLearn how to group Form controls into rows and columns
Configuring paddingLearn how to set padding for content inside the control group
Setting a titleLearn how to define a title for the control group
Making Form disabledLearn how to initialize a disabled Form (Example)
Making Form hiddenLearn how to initialize a hidden Form
Aligning controlsLearn how to configure the alignment of controls in Form (Example)
Changing Form configurationThe 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.

TopicDescription
Configuring required fieldsLearn how to specify that the input field is required to be filled in by the user (Example)
Defining restricted valuesLearn how to specify the minimum and/or maximum values allowed in the input
Setting allowed length of input valuesLearn how to limit the number of characters entered in an input or textarea field
Validation rulesLearn how to specify the rules of validation (Example)
Configuring messagesLearn how to show messages that will notify the end users, whether they are filling the form in correctly (Example)
Validating FormLearn how to validate the whole form (Example)
Validating a separate controlLearn 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.

TopicDescription
Width and height of FormLearn how to set the width and height for Form
Styling FormLearn how to customize a Form and its controls (Example)
List of CSS classesA 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.

TopicDescription
Sending Form to serverLearn how to send a Form to the server
Disabling / enabling FormLearn how to enable/disable a Form (Example)
Is disabledLearn how to check whether a Form or its control is disabled (Example)
Hiding / showing FormLearn how to hide/show a Form
Checking visibility of a FormLearn how to check whether a Form or its control is visible
Clearing FormLearn 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.

TopicDescription
Getting an itemLearn how to get access to the own methods and events of a control (Example)
* Disabling/enabling a controlThe example shows how to enable/disable a separate control
* Clearing a controlThe example shows how to clear a separate control
* Clearing validation of a controlThe example shows how to clear validation of a separate control
* Getting widget of controlThe 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 controlButton, DatePicker, Checkbox, CheckboxGroup, ColorPicker, Combo, Container, Input, RadioGroup, Select, SimpleVault, Slider, Spacer, Text, Textarea, TimePicker
Iterating over controlsLearn how to iterate over Form controls (Example)
Setting focus on controlLearn how to set focus on a control via Form API (Example)
Setting valueLearn how to set new values or states for Form controls (via Form API), (via Form control API)
Getting valueLearn how to get current values/states of Form controls (via Form API), (via Form control API)
Setting propertiesLearn how to change the values of the properties of Form controls (Example)
Getting propertiesLearn 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.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn 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

TopicDescription
Form methodsCheck the list of Form methods
Form eventsCheck the list of Form events
Form propertiesCheck the list of Form properties

Form controls API

TopicDescription
Button APICheck the API of the Button control of Form
Datepicker APICheck the API of the Datepicker control of Form
Checkbox APICheck the API of the Checkbox control of Form
CheckboxGroup APICheck the API of the CheckboxGroup control of Form
Colorpicker APICheck the API of the Colorpicker control of Form
Combo APICheck the API of the Combo control of Form
Container APICheck the API of the Container control of Form
Input APICheck the API of the Input control of Form
Radiogroup APICheck the API of the Radiogroup control of Form
Select APICheck the API of the Select control of Form
Simple Vault APICheck the API of the Simple Vault control of Form
Slider APICheck the API of the Slider control of Form
Spacer APICheck the API of the Spacer control of Form
Text APICheck the API of the Text control of Form
Textarea APICheck the API of the Textarea control of Form
Timepicker APICheck 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.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn 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!