DHTMLX Docs & Samples Explorer

Form and Tabbar

Source
<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: 600px;
            height: 430px;
        }
    </style>
    <script>
var myForm,
formData;
var dhxTabbar;
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"
    }];
    dhxTabbar = new dhtmlXTabBar("tabbar");
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar.setSkin("dhx_skyblue");
    dhxTabbar.addTab("a1", "Tab", 70);
    dhxTabbar.setTabActive("a1");
    myForm = dhxTabbar.cells("a1").attachForm(formData);
 
}
</script> <div id="tabbar"></div>