XML Format

Before considering XML details we'd like to mention that among possible ways of initialization we recommend to use JSON as the handiest way.

Initial Data

As initial data we'll take the following form:

XML Format Example

In XML data will look as:

welcome.xml

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="fieldset" name="data" label="Welcome" inputWidth="auto">
       <item type="input" name="name" label="Login" position="label-top"/>
       <item type="password" name="pass" label="Password" position="label-top"/>
       <item type="button" name="save" value="Proceed"/>
   </item>
</items>

Form Initialization

from XML file

welcome.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxform_dhx_skyblue.css">
 <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.xml");
        }
    </script>
 
</body>
</html>

from XML string

<!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 = [
              '<items> 
                <item type="fieldset" name="data" label="Welcome" inputWidth="auto"> 
                    <item type="input" name="name" label="Login"/> 
                    <item type="password" name="pass" label="Password"/> 
                    <item type="button" name="save" value="Proceed"/> 
                 </item> 
              </items>'
            ]
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct(formData);
        }
    </script>
</body>
</html>

Related sample: Init from xml string

Code samples for specific items

combo:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="combo" label="Select Location" inputWidth="120">
       <option text="Open Air" value="1"/>
       <option text="Private Party" value="2" />
   </item>
</items>

multiselect:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="multiselect" label="Can create/edit/delete users=" inputWidth="120">
       <option text="Administrators" value="Option 1" selected="true"/>
       <option text="Power users" value="Option 2" selected="true"/>
       <option text="Registered users" value="Option 3"/>
       <option text="Guests" value="Option 4"/>
       <option text="All users" value="Option 5"/>
   </item>
</items>

radio:

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item type="radio" name="effect" label="No effects" value="by_pages" 
          position="label-right" readonly="true"/>
    <item type="radio" name="effect" label="Effects" value="custom" checked="true" 
          position="label-right">
    <item type="radio" name="opt2" label="Shadow" 
          position="label-right" checked="true"/>
    <item type="radio" name="opt2" label="Perspective" position="label-right"/>
    <item type="radio" name="opt2" label="Shear" position="label-right"/>
    <item type="button" value="Proceed"/>
   </item>
</items>

select:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="select" label="Welcome" inputWidth="100">
       <option text="Admin" value="admin">
            <item type="checkbox" label="Show logs window"/>
            <item type="checkbox" label="Show advanced options"/>
       </option>
       <option text="Organiser" value="org" />
       <option text= "Power User" value="poweruser"/>
       <option text= "User" value="user" selected="true"/>
   </item>
</items>

settings:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="settings" position="label-left" labelAlign="right" 
         labelWidth="120" inputWidth="120"/>
   <item type="input" label="Name" value="John Smith"/>
   <item type="password" label="Password" value="123"/>
</items>