Initialization

To add dhtmlxForm into an application, you need to take the following simple steps:

Download the Form package and unpack it into a folder of your project
Include source files
Create a container
Define Form structure
Initialize Form with the object constructor

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

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxToolbar into the header of the created HTML file. The files are:

form.js
form.css

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

Create a container

Add a container for the Form and give it an id, e.g. "form_container":

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

Define Form structure

Now you need to specify the list of Form controls. For example, you can create a form with two text fields for entering a name and an email, a checkbox for the user to give consent to data processing and a button to send a form to a server.

Thus, the structure of your form will look like this:

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

Form structure

To add controls inside a form, you should put them into a layout, either a vertical one (the rows attribute), or a horizontal one (the cols attribute). In the example below controls are arranged vertically, one under another:

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

Initialize Form

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

the HTML object on the page that serves as the form container.
a configuration object which (besides config options) contains an array of form controls defined as objects with a set of attributes

var form = new dhx.Form("form_container",{rows});