<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.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">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../../dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_calendar.js"></script>
    <style>
        #layout {
            position: relative;
            width: 600px;
            height: 600px;
        }
    </style>
    <script>
var dhxLayout,
dhxTabbar,
myForm,
formData;
function zero(s) {
    if (s.length == 1)
        s = "0" + s;
    return s;
}
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 145,
        inputWidth: 150
    }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "input",
            label: "First Name",
            value: "James"
        }, {
            type: "input",
            label: "Last Name",
            value: "Brown"
        }, {
            type: "select",
            label: "Sex",
            value: "male",
            options: [{
                text: "Male",
                value: "male"
            }, {
                text: "Female",
                value: "female"
            }]
            }, {
            type: "calendar",
            name: "dob",
            label: "Date of Birth",
            value: "19-10-1991",
            dateFormat: "%d-%m-%Y"
        }, {
            type: "input",
            label: "E-mail Address",
            value: "james.brown@mail.com"
        }]
        }, {
        type: "block",
        inputWidth: "auto",
        id: "form_tab1",
        list: [{
            type: "input",
            label: "Login",
            value: "james_br"
        }, {
            type: "password",
            label: "Password",
            value: "12345"
        }, {
            type: "password",
            label: "Confirm password",
            value: "12345"
        }, {
            type: "select",
            label: "Account type",
            value: "user",
            options: [{
                text: "Admin",
                value: "admin"
            }, {
                text: "Organiser",
                value: "org"
            }, {
                text: "User",
                value: "user"
            }]
            }, {
            type: "checkbox",
            label: "Allow OAuth login",
            checked: true
        }, {
            type: "checkbox",
            label: "Allow OpenID login",
            checked: true
        }]
        }, {
        type: "block",
        inputWidth: "auto",
        id: "form_tab2",
        list: [{
            type: "input",
            label: "Street address",
            value: "22 Acacia Avenue"
        }, {
            type: "input",
            label: "City",
            value: "Oslo"
        }, {
            type: "input",
            label: "Country",
            value: "Norway"
        }, {
            type: "input",
            label: "Phone",
            value: "+47 12 34 56 78"
        }, {
            type: "input",
            label: "Fax",
            value: "+47 12 34 56 79"
        }, {
            type: "input",
            label: "Mobile",
            value: "+47 12 34 56 80"
        }]
        }, {
        type: "block",
        inputWidth: "auto",
        id: "form_tab3",
        list: [{
            type: "settings",
            position: "label-right",
            labelWidth: 200
        }, {
            type: "checkbox",
            label: "Send e-mail notifications",
            checked: true,
            list: [{
                type: "checkbox",
                label: "News & events",
                checked: true
            }, {
                type: "checkbox",
                label: "Advertisement"
            }, {
                type: "checkbox",
                label: "Account info updates",
                checked: true
            }, {
                type: "checkbox",
                label: "My posts/My threads updates",
                checked: true
            }]
            }]
        }, {
        type: "block",
        inputWidth: "auto",
        id: "form_cell_c",
        list: [{
            type: "input",
            label: "Account created",
            value: "22-09-1997 12:37",
            readonly: true
        }, {
            type: "input",
            label: "Created by",
            value: "Robert Patrick",
            readonly: true
        }, {
            type: "input",
            label: "Last account update",
            value: "19-02-2011 19:54",
            readonly: true
        }, {
            type: "input",
            label: "Updated by",
            value: "Matt Lazovsky",
            readonly: true
        }, {
            type: "button",
            value: "Update"
        }]
        }];
    dhxLayout = new dhtmlXLayoutObject("layout", "3E");
    dhxLayout.cells("a").setText("Common Information");
    dhxLayout.cells("a").setHeight(180);
    dhxLayout.cells("c").setText("Account Update");
    dhxLayout.cells("c").setHeight(180);
 
    dhxTabbar = dhxLayout.cells("b").attachTabbar();
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar.setSkin("dhx_skyblue");
    dhxTabbar.addTab("a1", "Login Details", 120);
    dhxTabbar.addTab("a2", "Address / Phone", 130);
    dhxTabbar.addTab("a3", "E-mailing", 100);
    dhxTabbar.setTabActive("a1");
 
    myForm = dhxLayout.cells("a").attachForm(formData);
 
    dhxTabbar.cells("a1").attachObject("form_tab1");
    dhxTabbar.cells("a2").attachObject("form_tab2");
    dhxTabbar.cells("a3").attachObject("form_tab3");
 
    dhxLayout.cells("c").attachObject("form_cell_c");
 
}</script>
 
 
    <div id="layout"></div>