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.

Related sample:  Init from ul

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>
Back to top