HTML Format
We can single out HTML initialization from other available ways. The reason - it's some kind of automatic initialization. After the page has been completely parsed - the form instance 'looks for' HTML data for initialization. If it finds the appropriate data - it's used for initialization.
Initial Data
As initial data we'll take the following form:
HTML Format Example
In HTML the data will look as:
<ul class="dhtmlxForm" name="myForm">
<li ftype="fieldset" name="data" inputWidth="auto">Welcome
<ul>
<li ftype="input" name="name">Login</li>
<li ftype="password" name="pass">Password</li>
<li ftype="button" name="save" value="Proceed"/>
</ul>
</li>
</ul>
Form Initialization
from HTML object
<!DOCTYPE HTML>
<html>
<head>
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<script> function doOnFormInit() {
// will be called immediately after form initialization
}
</script>
</head>
<body>
<ul class="dhtmlxForm" name="myForm" oninit="doOnFormInit">
<li ftype="fieldset" name="data" inputWidth="auto">Welcome
<ul>
<li ftype="input" name="name">Login</li>
<li ftype="password" name="pass">Password</li>
<li ftype="button" name="save" value="Proceed"/>
</ul>
</li>
</ul>
</body>
</html>
- name - the identification name of element (both items and form itself). You can refer to the appropriate element through the value stated there.
- oninit - defines the function that will be called immediately after form initialization.
from HTML form structure
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
<div id="form_container" style="width:250px;height:300px;"></div>
<script> var myForm;
function doOnLoad() {
myForm = new dhtmlXForm("form_container");
myForm.loadStructHTML("f1");
}
</script>
<body onload="doOnLoad();">
<form id="form1" style="display:none">
<ul>
<li ftype="input" value="Patricia D. Rossi">Full Name</li>
<li ftype="password" value="123">Password</li>
<li ftype="password" value="123">Confirm Password</li>
<li ftype="checkbox">Subscribe on news</li>
</ul>
</form>
</body>
</html>