DHTMLX Docs & Samples Explorer

Text/Select/Password

Source
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script>
var myForm,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 160,
        inputWidth: 160
    }, {
        type: "label",
        label: "New project"
    }, {
        type: "input",
        label: "Project Name",
        value: "New project"
    }, {
        type: "label",
        label: "Audio settings"
    }, {
        type: "select",
        label: "Format",
        name: "format",
        options: [{
            text: "AAC",
            value: "AAC"
        }, {
            text: "AC3",
            value: "AC3",
            selected: true
        }, {
            text: "MP3",
            value: "MP3"
        }, {
            text: "FLAC",
            value: "FLAC",
            list: [{
                type: "settings",
                position: "label-right"
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.2.1",
                checked: true
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.2.0"
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.1.4"
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.1.3"
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.1.2"
            }, {
                type: "radio",
                name: "flac_v",
                label: "Version 1.1.1"
            }]
            }]
        }, {
        type: "select",
        label: "Bitrate",
        options: [{
            text: "128 kbps",
            value: "128"
        }, {
            text: "160 kbps",
            value: "160"
        }, {
            text: "256 kbps",
            value: "256"
        }, {
            text: "320 kbps",
            value: "320",
            selected: true
        }, {
            text: "448 kbps",
            value: "448"
        }]
        }, {
        type: "select",
        label: "Channels",
        options: [{
            text: "2.0 Stereo",
            value: "2_0"
        }, {
            text: "5.1 Dolby Digital",
            value: "5_1",
            selected: true
        }]
        }, {
        type: "label",
        label: "Video settings"
    }, {
        type: "select",
        label: "Codec",
        options: [{
            text: "DivX",
            value: "DivX"
        }, {
            text: "XviD",
            value: "XviD",
            selected: true
        }]
        }, {
        type: "select",
        label: "Bitrate",
        options: [{
            text: "728 kbps",
            value: "728"
        }, {
            text: "1226 kbps",
            value: "1226",
            selected: true
        }, {
            text: "2412 kbps",
            value: "2412"
        }]
        }, {
        type: "label",
        label: "Advanced"
    }, {
        type: "input",
        label: "Command line options",
        rows: 2,
        value: "-vf crop=618:526:0:14,pp=lb"
    }, {
        type: "label",
        label: "Backup Control"
    }, {
        type: "checkbox",
        label: "Create local backup",
        position: "label-right",
        list: [{
            type: "input",
            label: "Path",
            value: "/home/nakamuro/backups/"
        }]
        }, {
        type: "checkbox",
        label: "Copy backup to server",
        position: "label-right",
        list: [{
            type: "input",
            label: "Login",
            value: "nakamuro"
        }, {
            type: "password",
            label: "Password",
            value: "123"
        }]
        }, {
        type: "label",
        label: "Sharing"
    }, {
        type: "multiselect",
        label: "Share output stream for",
        size: 6,
        options: [{
            text: "Administrators",
            value: "1",
            selected: true,
            list: [{
                type: "settings",
                position: "label-right"
            }, {
                type: "checkbox",
                label: "Include Sub-Admins",
                checked: true
            }]
            }, {
            text: "Power users",
            value: "2",
            selected: true,
            list: [{
                type: "settings",
                position: "label-right"
            }, {
                type: "checkbox",
                label: "Include Range 0",
                checked: true
            }, {
                type: "checkbox",
                label: "Include Range 1"
            }, {
                type: "checkbox",
                label: "Include Range 2"
            }]
            }, {
            text: "Registered users",
            value: "3"
        }, {
            text: "Guests",
            value: "4"
        }, {
            text: "All users",
            value: "5"
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onBeforeChange", function() {
        // console.log(arguments)
        return true;
    });
    myForm.attachEvent("onChange", function() {
        // console.log(arguments)
        });
}
</script> <div id="myForm" style="height:800px;"></div>