<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxTabbar/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#tabbar {
            position: relative;
            width: 380px;
            height: 230px;
        }
    </style>
    <script>
var myForm,
formData;
var dhxTabbar;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 145,
        inputWidth: 150
    }, {
        type: "block",
        inputWidth: "auto",
        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",
        id: "tab2",
        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",
        id: "tab3",
        position: "absolute",
        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"
        }]
        }];
    dhxTabbar = new dhtmlXTabBar("tabbar");
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar.setSkin("dhx_skyblue");
    dhxTabbar.addTab("a1", "Tab 1", 70);
    dhxTabbar.addTab("a2", "Tab 2", 70);
    dhxTabbar.addTab("a3", "Tab 3", 70);
    dhxTabbar.setTabActive("a1");
    myForm = dhxTabbar.cells("a1").attachForm(formData);
    dhxTabbar.cells("a2").attachObject("tab2");
    dhxTabbar.cells("a3").attachObject("tab3");
 
}</script>
 
 
    <div id="tabbar"></div>