DHTMLX Docs & Samples Explorer

Form and Layout

Source
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#layout {
            position: relative;
            width: 620px;
            height: 430px;
        }
    </style>
    <script>
var myForm,
formData;
var dhxLayout;
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"
    }];
    dhxLayout = new dhtmlXLayoutObject("layout", "2U");
    myForm = dhxLayout.cells("a").attachForm(formData);
 
}
</script> <div id="layout"></div>