<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script>
var myForm,
formData;
var conf = {
    t0: "-",
    t1: "-",
    t2: "-",
    t3: "-"
};
function initForm() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 130,
        inputWidth: 120,
        blockOffset: conf.t0
    }, {
        type: "fieldset",
        label: "Welcome",
        inputWidth: "auto",
        list: [{
            type: "block",
            inputWidth: "auto",
            blockOffset: conf.t1,
            list: [{
                type: "radio",
                name: "type",
                label: "Already have account",
                labelWidth: "auto",
                position: "label-right",
                checked: true,
                list: [{
                    type: "input",
                    label: "Login",
                    value: "p_rossi"
                }, {
                    type: "password",
                    label: "Password",
                    value: "123"
                }, {
                    type: "checkbox",
                    label: "Remember me",
                    checked: true
                }]
                }]
            }, {
            type: "block",
            inputWidth: "auto",
            blockOffset: conf.t2,
            list: [{
                type: "radio",
                name: "type",
                label: "Not registered yet",
                labelWidth: "auto",
                position: "label-right",
                list: [{
                    type: "input",
                    label: "Full Name",
                    value: "Patricia D. Rossi"
                }, {
                    type: "input",
                    label: "E-mail Address",
                    value: "p_rossi@example.com"
                }, {
                    type: "input",
                    label: "Login",
                    value: "p_rossi"
                }, {
                    type: "password",
                    label: "Password",
                    value: "123"
                }, {
                    type: "password",
                    label: "Confirm Password",
                    value: "123"
                }, {
                    type: "checkbox",
                    label: "Subscribe on news"
                }]
                }]
            }, {
            type: "block",
            inputWidth: "auto",
            blockOffset: conf.t3,
            list: [{
                type: "radio",
                name: "type",
                label: "Guest login",
                labelWidth: "auto",
                position: "label-right",
                list: [{
                    type: "select",
                    label: "Account type",
                    options: [{
                        text: "Admin",
                        value: "admin"
                    }, {
                        text: "Organiser",
                        value: "org"
                    }, {
                        text: "Power User",
                        value: "poweruser"
                    }, {
                        text: "User",
                        value: "user"
                    }]
                    }, {
                    type: "checkbox",
                    label: "Show logs window"
                }]
                }]
            }]
        }, {
        type: "newcolumn"
    }, {
        type: "fieldset",
        label: "Customize",
        inputWidth: "auto",
        offsetLeft: 20,
        list: [{
            type: "settings",
            labelWidth: 170
        }, {
            type: "select",
            label: "Value in Settings",
            name: "t0",
            options: [{
                value: "-",
                text: "default",
                selected: conf.t0 == "-"
            }, {
                value: "0",
                text: "0",
                selected: conf.t0 == "0"
            }, {
                value: "20",
                text: "20",
                selected: conf.t0 == "20"
            }, {
                value: "40",
                text: "40",
                selected: conf.t0 == "40"
            }, {
                value: "60",
                text: "60",
                selected: conf.t0 == "60"
            }, {
                value: "80",
                text: "80",
                selected: conf.t0 == "80"
            }]
            }, {
            type: "select",
            label: "Block \"Have Account\"",
            name: "t1",
            options: [{
                value: "-",
                text: "default",
                selected: conf.t1 == "-"
            }, {
                value: "0",
                text: "0",
                selected: conf.t1 == "0"
            }, {
                value: "20",
                text: "20",
                selected: conf.t1 == "20"
            }, {
                value: "40",
                text: "40",
                selected: conf.t1 == "40"
            }, {
                value: "60",
                text: "60",
                selected: conf.t1 == "60"
            }, {
                value: "80",
                text: "80",
                selected: conf.t1 == "80"
            }]
            }, {
            type: "select",
            label: "Block \"Not Registered\"",
            name: "t2",
            options: [{
                value: "-",
                text: "default",
                selected: conf.t2 == "-"
            }, {
                value: "0",
                text: "0",
                selected: conf.t2 == "0"
            }, {
                value: "20",
                text: "20",
                selected: conf.t2 == "20"
            }, {
                value: "40",
                text: "40",
                selected: conf.t2 == "40"
            }, {
                value: "60",
                text: "60",
                selected: conf.t2 == "60"
            }, {
                value: "80",
                text: "80",
                selected: conf.t2 == "80"
            }]
            }, {
            type: "select",
            label: "Block \"Guest Login\"",
            name: "t3",
            options: [{
                value: "-",
                text: "default",
                selected: conf.t3 == "-"
            }, {
                value: "0",
                text: "0",
                selected: conf.t3 == "0"
            }, {
                value: "20",
                text: "20",
                selected: conf.t3 == "20"
            }, {
                value: "40",
                text: "40",
                selected: conf.t3 == "40"
            }, {
                value: "60",
                text: "60",
                selected: conf.t3 == "60"
            }, {
                value: "80",
                text: "80",
                selected: conf.t3 == "80"
            }]
            }, {
            type: "button",
            value: "Set",
            name: "set",
            offsetTop: 7,
            offsetLeft: 105
        }
]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onButtonClick", function(name) {
        if (name == "set") {
            var r = myForm.getFormData();
            for (var a in conf)
                conf[a] = r[a];
            myForm.unload();
            initForm();
        }
    });
 
}</script>
 
 
    <div id="myForm" style="height:500px;"></div>