<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxAccordion/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#accord {
            position: relative;
            width: 340px;
            height: 480px;
        }
    </style>
    <script>
var myForm,
formData;
var dhxAcc;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 100,
        inputWidth: 120
    }, {
        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: "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: "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: "button",
        value: "Proceed"
    }];
    dhxAcc = new dhtmlXAccordion("accord");
    dhxAcc.addItem("a1", "Cell A");
    dhxAcc.addItem("a2", "Cell B");
    dhxAcc.addItem("a3", "Cell C");
    dhxAcc.setActive("a1");
    myForm = dhxAcc.cells("a1").attachForm(formData);
 
}</script>
 
 
    <div id="accord"></div>