XML

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:

Configuration

In XML the 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>

HTML Code

welcome(xml).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>

If you don't want to place XML structure into individual file you can specify it in the same HTML file by using the following technique:

function doOnLoad() {
       myForm = new dhtmlXForm("form_container"); 
       myForm.loadStructString('<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>');
}

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>