<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxColorPicker/codebase/dhtmlxcolorpicker.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../../dhtmlxColorPicker/codebase/dhtmlxcolorpicker.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_calendar.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_colorpicker.js"></script>
    <style>
        div#simpleLog {
            width: 500px;
            height: 200px;
            font-family: Tahoma;
            font-size: 11px;
            overflow: auto;
        }
        span.allow {
            color: green;
        }
        span.deny {
            color: red;
        }
    </style>
    <script>
var myForm,
formData,
logObj;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: "100"
    }, {
        type: "input",
        name: "login",
        value: "abc",
        label: "Login"
    }, {
        type: "input",
        name: "email",
        value: "abc@mail.com",
        label: "E-mail"
    }, {
        type: "password",
        name: "pwd",
        value: "123",
        label: "Password"
    }, {
        type: "calendar",
        name: "birthday",
        value: "1980-05-27",
        label: "Birthday",
        dateFormat: "%Y-%m-%d",
        calendarPosition: "right"
    }, {
        type: "colorpicker",
        name: "favcolor",
        value: "#2391E9",
        label: "Fav. Color",
        imagePath: "../../../dhtmlxColorPicker/codebase/imgs/"
    }
];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onInputChange", function(name, val, inp) {
        logEvent("onInputChange: " + name + ", " + val + "<br>")
        });
}
function logEvent(t) {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML += t;
    logObj.scrollTop = logObj.scrollHeight;
}
function clearLog() {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML = "";
}</script>
 
 
    <table>
        <tr><td><div id="myForm"></div></td></tr>
        <tr><td><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr>
        <tr><td><div id="simpleLog"></div></td></tr>
    </table>