<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",
        inputWidth: "120"
    }, {
        type: "input",
        name: "login",
        value: "abc",
        label: "Login"
    }, {
        type: "input",
        name: "email",
        value: "abc@mail.com",
        label: "E-mail"
    }, {
        type: "select",
        name: "sex",
        value: "male",
        label: "Sex",
        options: [{
            value: "male",
            text: "Male"
        }, {
            value: "female",
            text: "Female"
        }]
        }, {
        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/"
    }, {
        type: "checkbox",
        name: "ch_1",
        label: "Checkbox"
    }, {
        type: "radio",
        name: "r_1",
        value: "v_0",
        label: "Radiobutton 1",
        checked: true
    }, {
        type: "radio",
        name: "r_1",
        value: "v_1",
        label: "Radiobutton 2"
    }, {
        type: "button",
        name: "okey",
        value: "Okey"
    }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onKeyUp", function(inp, ev, id, value) {
        if (typeof(value) != "undefined") {
            // radiobutton
            logEvent("onKeyUp event, id: " + id + ",value: " + value + "<br>");
        } else {
            logEvent("onKeyUp event, id: " + id + "<br>");
        }
    });
    myForm.attachEvent("onKeyDown", function(inp, ev, id, value) {
        if (typeof(value) != "undefined") {
            // radiobutton
            logEvent("onKeyDown event, id: " + id + ",value: " + value + "<br>");
        } else {
            logEvent("onKeyDown event, id: " + id + "<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>