<meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxpopup_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css"/>
    
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCombo/codebase/dhtmlxcombo.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">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxEditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">
    
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxpopup.js"></script>
    
    <script src="../../../dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
    <script src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../../dhtmlxColorPicker/codebase/dhtmlxcolorpicker.js"></script>
    <script src="../../../dhtmlxEditor/codebase/dhtmlxeditor.js"></script>
    <script src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_combo.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_btn2state.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_calendar.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_colorpicker.js"></script>
    <script src="../../../dhtmlxForm/codebase/ext/dhtmlxform_item_editor.js"></script>
 
    <style>
        #myForm {
            position: relative;
            margin: 10px;
            padding: 15px 30px 17px;
            border: 1px solid #cecece;
        }
        /* toggle-style checkbox */
        /* enabled, not checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_0 {
            background-image: url("../../../dhtmlxForm/samples/02_items/imgs/toggle_off.png");
            width: 42px;
            height: 20px;
        }
        /* enabled, checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_1 {
            background-image: url("../../../dhtmlxForm/samples/02_items/imgs/toggle_on.png");
            width: 42px;
            height: 20px;
        }
        /* disabled, not checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_0 {
            background-image: url("../../../dhtmlxForm/samples/02_items/imgs/toggle_off_dis.png");
            width: 42px;
            height: 20px;
        }
        /* disabled, checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_1 {
            background-image: url("../../../dhtmlxForm/samples/02_items/imgs/toggle_on_dis.png");
            width: 42px;
            height: 20px;
        }
    </style>
    <script>
 
var myPop;
var myForm;
 
function doOnLoad() {
 
    dhtmlx.skin = "dhx_skyblue";
    window.dhx_globalImgPath = "../../../dhtmlxCombo/codebase/imgs/";
 
    myForm = new dhtmlXForm("myForm", [{
        type: "settings",
        position: "label-left",
        labelWidth: 150,
        inputWidth: 150,
        offsetLeft: 10
    }, 
{
        type: "label",
        label: "General Information",
        offsetLeft: 0
    }, {
        type: "input",
        name: "name",
        label: "Full Name / Nick",
        value: "Ogiwara Masaaki"
    }, {
        type: "password",
        name: "pwd",
        label: "Password",
        value: "12345"
    }, {
        type: "password",
        name: "pwd2",
        label: "Confirm password",
        value: "12345"
    }, {
        type: "calendar",
        name: "dob",
        dateFormat: "%Y-%m-%d",
        label: "Day Of Birth",
        value: "1975-08-22",
        calendarPosition: "bottom"
    }, {
        type: "colorpicker",
        name: "color",
        label: "Interface color",
        value: "#a4bed4",
        imagePath: "../../../dhtmlxColorPicker/codebase/imgs/"
    }, 
{
        type: "label",
        label: "More Options",
        offsetTop: 10,
        offsetLeft: 0
    }, {
        type: "select",
        name: "region",
        label: "Please select region",
        value: "2",
        options: [{
            value: "1",
            text: "Europe"
        }, {
            value: "2",
            text: "Asia"
        }, {
            value: "3",
            text: "Africa"
        }, {
            value: "4",
            text: "S. America"
        }, {
            value: "5",
            text: "N. America"
        }
]
        }, {
        type: "select",
        name: "lng",
        label: "Select Language",
        value: "4",
        options: [{
            value: "1",
            text: "English"
        }, {
            value: "2",
            text: "German"
        }, {
            value: "3",
            text: "Russian"
        }, {
            value: "4",
            text: "Japanese"
        }, {
            value: "5",
            text: "Chinese"
        }]
        }, 
{
        type: "label",
        label: "Messaging",
        offsetTop: 10,
        offsetLeft: 0
    }, {
        type: "checkbox",
        name: "pmsg",
        label: "Private messages",
        checked: 1
    }, {
        type: "checkbox",
        name: "emsg",
        label: "Email notofications",
        checked: 1
    }, 
{
        type: "label",
        label: "Online Status",
        offsetTop: 10,
        offsetLeft: 0
    }, {
        type: "radio",
        name: "showme",
        value: "yes",
        label: "Show when online",
        checked: 1
    }, {
        type: "radio",
        name: "showme",
        value: "no",
        label: "Always hidden"
    }, 
{
        type: "label",
        label: "Advanced Items",
        offsetTop: 10,
        offsetLeft: 0
    }, {
        type: "combo",
        name: "combo",
        value: "2",
        label: "Skill level",
        options: [{
            value: "1",
            text: "Admin"
        }, {
            value: "2",
            text: "Power user"
        }, {
            value: "3",
            text: "User"
        }]
        }, {
        type: "btn2state",
        name: "toggle",
        inputWidth: 17,
        inputHeight: 19,
        label: "Highlight current line",
        checked: true
    }, {
        type: "editor",
        name: "comment",
        label: "",
        position: "label-top",
        inputWidth: 300,
        inputHeight: 100,
        value: "Any ideas what to write here?"
    }, 
{
        type: "button",
        name: "proceed",
        value: "Proceed",
        offsetLeft: 209,
        offsetTop: 20
    }]);
    myForm.setSkin("dhx_skyblue");
 
    myPop = new dhtmlXPopup({
        form: myForm,
        id: ["name", "pwd", "pwd2", "region", "lng", "pmsg", "emsg", ["showme", "yes"], ["showme", "no"], "proceed", "combo", "toggle", "dob", "color", "comment"]
        });
    myPop.attachHTML("Please enter something");
 
    myForm.attachEvent("onFocus", function(id, value) {
        if (typeof(value) != "undefined")
            id = [id, value];
        // for radiobutton
        myPop.show(id);
    });
    myForm.attachEvent("onBlur", function(id, value) {
        myPop.hide();
    });
 
}</script>
    <style>
        
        
    </style>
 
 
    <div id="myForm"></div>