Initialization

info

Download the DHTMLX Form package as part of the DHTMLX Suite library.

Follow these steps to add DHTMLX Form to an application:

• Include source files
• Create a container
• Define Form structure
• Initialize Form with the constructor

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX Form</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="form_container"></div>
        <script>
            // creating DHTMLX Form
            const form = new dhx.Form("form_container");
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and add the full paths to the JS and CSS files of the DHTMLX Suite library in its header. The files are:

• suite.js
• suite.css

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for a Form and give it an id, for example form_container:

<div id="form_container"></div>

Define Form structure

Specify the list of Form controls. For example, you can create a form with two text fields for a name and an email, a checkbox for consent to data processing, and a button that sends the form to a server.

The structure of your form then looks like this:

• a Name input
• an Email input
• an Agree checkbox
• a Send button

To add controls to a form, put them into a layout: either a vertical one (the rows property) or a horizontal one (the cols property). The example below arranges controls vertically, one under another:

rows: [
    {
        type: "input",
        label: "Name",
        icon: "dxi dxi-magnify",
        placeholder: "John Doe",
        name: "name"
    },
    {
        type: "input",
        label: "Email",
        placeholder: "jd@mail.name",
        name: "email"
    },        
    {        
        type: "input",
        inputType: "password",
        label: "Password",
        placeholder: "********",
        name: "password"
    },
    {
        type: "checkbox",
        text: "I agree",
        value: "checkboxvalue",
        id: "agree",
        name: "agree"
    },
    {
        type: "button",
        text: "Send",
        size: "medium",
        view: "flat",
        submit: true,
        color: "primary"
    }
]

Initialize Form

Initialize Form with the dhx.Form constructor. The constructor takes two parameters:

• The HTML object on the page that serves as the form container.
• A configuration object that contains config options and an array of form controls defined as objects.

const form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    rows: [
        {
            type: "input",
            label: "Name",
            icon: "dxi dxi-magnify",
            placeholder: "John Doe",
            name: "name"
        },
        // more form controls
    ]
});

Configuration properties

You can find the full list of Form configuration properties in the Form API overview article.

Example