Initialization

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

<!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>

Related sample:  Initialization - DHTMLX Form

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});

Related sample:  Initialization - DHTMLX Form

Back to top