<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_web.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_terrace.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="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_web.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_terrace.css">
 
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
    <script src="../../../dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
    <script src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_combo.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_calendar.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_upload.js"></script>
    <script src="../../codebase/ext/swfobject.js"></script>
    <script>
 
var myForm,
formData;
 
function init(skin) {
 
    if (myForm != null)
        myForm.unload();
 
    // for combo
    dhtmlx.skin = skin || "dhx_skyblue";
    window.dhx_globalImgPath = "../../../dhtmlxCombo/codebase/imgs/";
 
    formData = [{
        type: "settings",
        position: "label-right",
        labelWidth: "auto",
        inputWidth: 130
    }, {
        type: "label",
        label: "dhtmlXForm skin test, " + dhtmlx.skin + " loaded"
    }, {
        type: "checkbox",
        label: "Sync data with FTP server",
        checked: true,
        list: [{
            type: "settings",
            labelWidth: 90,
            inputWidth: 200,
            position: "label-left"
        }, {
            type: "input",
            name: "ftp_server",
            label: "Server",
            value: "ftp://backup.mydomain.com"
        }, {
            type: "input",
            name: "ftp_login",
            label: "Login",
            value: "user"
        }, {
            type: "password",
            name: "ftp_pwd",
            label: "Password",
            value: "password"
        }, {
            type: "select",
            name: "ftp_sync",
            label: "Sync every",
            options: [{
                value: "day",
                text: "day"
            }, {
                value: "2ndday",
                text: "second day"
            }, {
                value: "friday",
                text: "friday"
            }, {
                value: "2ndfriday",
                text: "second friday",
                selected: true
            }, {
                value: "Month",
                text: "last friday in a month"
            }]
            }, {
            type: "checkbox",
            name: "ftp_log",
            value: 1,
            label: "Enable log",
            checked: true
        }]
        }, {
        type: "checkbox",
        label: "Init system hardware upgrade",
        offsetTop: 10,
        checked: true,
        list: [
        //
        {
            type: "settings",
            labelWidth: 90,
            inputWidth: 100,
            position: "label-left"
        }, {
            type: "calendar",
            dateFormat: "%Y-%m-%d",
            label: "Start Date",
            name: "reminder",
            enableTime: false,
            calendarPosition: "right",
            value: "2013-03-01"
        }, {
            type: "select",
            label: "Duration",
            options: [{
                value: "day",
                text: "day"
            }, {
                value: "week",
                text: "week",
                selected: true
            }, {
                value: "2weeks",
                text: "two weeks"
            }]
            }]
        }, {
        type: "checkbox",
        label: "Use custom UI colors",
        checked: true,
        offsetTop: 10,
        list: [{
            type: "settings",
            labelWidth: 70,
            inputWidth: "auto"
        }, {
            type: "fieldset",
            label: "Font",
            list: [{
                type: "radio",
                name: "fontcolor",
                label: "Black",
                checked: true
            }, {
                type: "radio",
                name: "fontcolor",
                label: "Blue"
            }, {
                type: "radio",
                name: "fontcolor",
                label: "Green"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "fieldset",
            label: "Background",
            offsetLeft: 30,
            list: [{
                type: "radio",
                name: "bgcolor",
                label: "White",
                checked: true
            }, {
                type: "radio",
                name: "bgcolor",
                label: "Yellow"
            }, {
                type: "radio",
                name: "bgcolor",
                label: "Gray"
            }]
            }]
        }, {
        type: "checkbox",
        label: "Custom font",
        checked: true,
        offsetTop: 10,
        list: [{
            type: "combo",
            label: "",
            inputWidth: 120,
            options: [{
                value: "tahoma",
                text: "Tahoma"
            }, {
                value: "arial",
                text: "Arial",
                selected: true
            }, {
                value: "verdana",
                text: "Verdana"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "combo",
            label: "",
            inputWidth: 70,
            offsetLeft: 5,
            options: [{
                value: "12",
                text: "12px"
            }, {
                value: "13",
                text: "13px"
            }, {
                value: "14",
                text: "14px",
                selected: true
            }]
            }]
        }, {
        type: "checkbox",
        label: "Upload new data",
        checked: true,
        offsetTop: 10,
        list: [{
            type: "fieldset",
            label: "Files",
            inputWidth: 350,
            list: [{
                type: "upload",
                name: "myFiles",
                inputWidth: 330,
                url: "../07_uploader/php/dhtmlxform_item_upload.php",
                _swfLogs: "enabled",
                swfPath: "../../codebase/ext/uploader.swf",
                swfUrl: "../../samples/07_uploader/php/dhtmlxform_item_upload.php"
            }]
            }]
        }, 
    //
    {
        type: "checkbox",
        label: "Yes! I'm sure to save changes",
        offsetTop: 10,
        list: [
        //
        {
            type: "button",
            value: "Save",
            offsetLeft: 50,
            offsetTop: 10
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Cancel",
            offsetLeft: 8,
            offsetTop: 10
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.setFocusOnFirstActive();
}</script>
 
 
    <a href="javascript:void(0);" onclick="init('dhx_skyblue');">DHX SkyBlue</a>
    <br>
    <a href="javascript:void(0);" onclick="init('dhx_web');">DHX Web</a>
    <br>
    <a href="javascript:void(0);" onclick="init('dhx_terrace');">DHX Terrace</a>
    <br><br>
    <div id="myForm"></div>