JSON Format

We recommend you to use JSON format as it's the handiest way of initialization.

Initial Data

As initial data we'll take the following form:

JSON Format Example

In JSON the data will look as:

welcome.json

[
    {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto", list:[
        {type:"input",    name: "name", label:"Login"},
        {type:"password", name:"pass",  label:"Password"},  
        {type:"button",   name:"save",  value:"Proceed"}] 
    }
]

Form Initialization

from JSON object

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
 
<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>        var myForm, formData;
        function doOnLoad() {
            formData = [
                {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto", 
                 list:[
                    {type:"input",    name:'name', label:'Login'},
                    {type:"password", name:"pass", label:"Password"},
                    {type:"button",   name:"save", value:"Proceed"}] 
                }
            ]
            myForm = new dhtmlXForm("form_container", formData);
        }
    </script>
</body>
</html>

from JSON file

welcome.html

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
 
<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>        var myForm;
        function doOnLoad() {
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct("welcome.json");
        }
    </script> 
</body>
</html>

Code samples for specific items

combo:

var formData = [
    {type: "combo", label: "Select Location", inputWidth:120, options:[
        {text: "Open Air",      value: "1"},
        {text: "Private Party", value: "2"}
    ]}
];

multiselect:

var formData = [
    {type: "multiselect", label: "Can create/edit/delete users=", inputHeight:90,
      inputWidth:130, options:[
        {text: "Administrators",    value: "Option 1", selected: true}, 
        {text: "Power users",       value: "Option 2", selected: true},
        {text: "Registered users",  value: "Option 3"},
        {text: "Guests",            value: "Option 4"},
        {text: "All users",         value: "Option 5"}
    ]}
];

radio:

var formData = [
    {type: "radio", name: "effect", label: "No effects", value: "by_pages", 
       position:"label-right", readonly:"true"},
    {type: "radio", name: "effect", label: "Effects", value: "custom", 
       checked:"true", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shadow", position:"label-right", 
       checked:"true"},
    {type: "radio", name: "opt2", label: "Perspective", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shear", position:"label-right"},
    {type:"button", value:"Proceed"}
];

select:

var formData = [
    {type: "select", label: "Welcome", inputWidth:"100",options:[
        {text: "Admin", value: "admin",list:[
            {type:"checkbox",label:"Show logs window"},
            {type:"checkbox",label:"Show advanced options"}
        ]},
        {text: "Organiser", value: "org"},
        {text: "Power User", value: "poweruser"},
        {text: "User", value: "user", selected:true}
    ]}
];

settings:

var formData = [
    {type:"settings",position:"label-left",labelWidth:120,inputWidth:120,
       labelAlign:"right"},
    {type: "input",     label: "Name",      value: "John Smith"},
    {type: "password",  label: "Password",  value: "123"}
];