<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxpopup_dhx_skyblue.css"/>
    
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
    <script src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>
    <script src="../../codebase/dhtmlxpopup.js"></script>
    
    <style>
        #myToolbar {
            margin: 10px;
        }
        #eLog {
            overflow: auto;
            font-size: 11px;
            font-family: Tahoma;
            margin: 100px 10px 10px 10px;
            width: 400px;
            padding: 2px;
        }
    </style>
    <script>
 
var myToolbar;
var myPop;
var myForm;
var eLog;
var eId;
 
function doOnLoad() {
 
    myToolbar = new dhtmlXToolbarObject("myToolbar", "dhx_skyblue");
    myToolbar.setIconsPath("../common/imgs/");
    myToolbar.loadXML("../common/toolbar.xml?etc=" + new Date().getTime(), function() {
 
        myToolbar.setItemText("workbut", "Login Form");
 
        myPop = new dhtmlXPopup({
            toolbar: myToolbar,
            id: "workbut"
        });
 
        // this event will init form on 1st popup show
        // and will detached automaticaly (i.e. will called once)
        eId = myPop.attachEvent("onShow", function() {
 
            myForm = myPop.attachForm([{
                type: "settings",
                position: "label-left",
                labelWidth: 110,
                inputWidth: 130
            }, {
                type: "input",
                label: "Email Address",
                name: "email"
            }, {
                type: "password",
                label: "Password",
                name: "pwd"
            }, {
                type: "checkbox",
                label: "Remember me",
                checked: 1
            }, {
                type: "button",
                value: "Proceed",
                offsetLeft: 149
            }]);
            myForm.attachEvent("onButtonClick", function() {
                myPop.hide();
            });
 
            myPop.detachEvent(eId);
        });
 
        // this event will not detached and will called every time to put focus on "email"
        myPop.attachEvent("onShow", function() {
            myForm.setFocusOnFirstActive();
        });
    });
 
}</script>
    <style>
        
        
    </style>
 
 
    <div id="myToolbar"></div>
    <div id="eLog">
        In this demo form attached to popup not inited on startup<br>
        it will inited when popup will shown first time, i.e. on demand<br>
        init way here is an event's callback, which will init form<br>
        and autodetached, i.e. will called once
    </div>