<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: "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);
 
    // adding custom blur event, w/o overwriting existing
    var inpLogin = myForm.getInput("login");
    if (window.addEventListener) {
        inpLogin.addEventListener("blur", doOnBlur, false);
    } else {
        inpLogin.attachEvent("onblur", doOnBlur);
    }
 
    // adding custom blur event, with overwriting existing
    var inpEmail = myForm.getInput("email");
    inpEmail.onblur = doOnBlur;
 
    // custom click event
    var inpCalendar = myForm.getInput("birthday");
    if (window.addEventListener) {
        inpCalendar.addEventListener("click", doOnClick, false);
    } else {
        inpCalendar.attachEvent("onclick", doOnClick);
    }
 
}
function doOnBlur(e) {
    e = e || event;
    var t = (e.target || e.srcElement);
    logEvent("custom onblur event: " + t._idd + "<br>");
}
function doOnClick(e) {
    e = e || event;
    var t = (e.target || e.srcElement);
    logEvent("custom onclick event: " + t._idd + "<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>