Before init you should include corresponding css/js files:
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxform_dhx_skyblue.css"> <script src="codebase/dhtmlxcommon.js"></script> <script src="codebase/dhtmlxform.js"></script>
If you have a ready form on the page and just need to add the ability to validate or save|load data you can use
<form id="my_form"> ... </form>
var dhxForm = new dhtmlXForm("my_form");
To have the really useful form you need to define bindings and provide server side connector
You need to have some HTML element to use as container for dhtmlxForm:
<div id="dhxFormObj"></div>
Possible configuration formats are:
First you need to create an object with incoming data:
var formData = [ {type: "radio", name: "color", value: "r", label: "Red", checked: true}, {type: "radio", name: "color", value: "g", label: "Green"}, {type: "radio", name: "color", value: "b", label: "Blue"} ];
Then you need to create a new instance of dhtmlxForm:
var dhxForm = new dhtmlXForm("dhxFormObj", formData);
You need to create an UL object with class name dhtmlxForm, and it will automatically replaced with dhtmlxForm according the struct:
<ul class="dhtmlxForm"> <li ftype="radio" name="color" value="r" checked="true">Red</li> <li ftype="radio" name="color" value="g">Green</li> <li ftype="radio" name="color" value="b">Blue</li> </ul>
First you need to create an XML file with dhtmlxForm data:
<items> <item type="radio" name="color" value="r" checked="true" label="Red"/> <item type="radio" name="color" value="r" label="Green"/> <item type="radio" name="color" value="r" label="Blue"/> </items>
The you need to init dhtmlxForm and load XML into it:
var dhxForm = new dhtmlXForm("dhxFormObj"); dhxForm.loadStruct("dhxForm.xml");
Loading from XML string also supported:
var dhxForm = new dhtmlXForm("dhxFormObj"); dhxForm.loadStructString('<items><item type="radio" name="color" ...');