<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_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="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_calendar.js"></script>
    <script>
var myForm,
formData;
var myForm2;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 130,
        inputWidth: 250,
        noteWidth: 250
    }, {
        type: "label",
        label: "Init from JSON",
        labelWidth: "auto"
    }, {
        type: "input",
        name: "prj_name",
        label: "Project Name",
        value: "My Project",
        tooltip: "Enter your Project Name here",
        required: true,
        info: true,
        note: {
            text: "Enter your project name here. This fields is required."
        }
    }, {
        type: "input",
        name: "prj_descr",
        label: "Project Description",
        value: "My project is great!",
        rows: 3,
        note: {
            text: "Enter your project description. It should reflect your project basic purposes. This fields is not required but also important."
        }
    }, {
        type: "input",
        name: "email",
        label: "E-mail",
        value: "",
        tooltip: "Please enter your valid e-mail address",
        validate: "ValidEmail",
        required: true,
        note: {
            text: "Your valid email address to complete registartion. You will receive account activating instructions on this email."
        }
    }, {
        type: "input",
        name: "email2",
        label: "Confirm e-mail",
        value: "",
        validate: "ValidEmail",
        required: true,
        note: {
            text: "Confirm your valid email address just to be sure it correct."
        }
    }, {
        type: "select",
        name: "acc_type",
        label: "Account type",
        info: true,
        required: true,
        note: {
            text: "Specify type of account you need. Information regarding account features can be found <a href='javascript:void(0);' style='color:gray;'>here</a>."
        },
        options: [{
            text: "Free limited account",
            value: "free"
        }, {
            text: "Standard functionality",
            value: "std",
            selected: true
        }, {
            text: "Standard+ functionality",
            value: "stdplus"
        }, {
            text: "Full-featured account",
            value: "full"
        }]
        }, {
        type: "calendar",
        dateFormat: "%Y-%m-%d %H:%i",
        name: "valid_until",
        label: "Valid Until",
        value: "2014-01-01 02:35",
        enableTime: true,
        calendarPosition: "right",
        info: true,
        note: {
            text: "Please specify date your project will valid until for."
        }
    }, {
        type: "checkbox",
        name: "email_perm",
        label: "Permanent E-mail",
        info: true,
        tooltip: "Use this email as permanent e-mail address to contact me",
        note: {
            text: "Mark this checkbox if you want to use this email account as permanent email address to contact you."
        }
    }, {
        type: "button",
        value: "Submit"
    }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.enableLiveValidation(true);
    myForm.attachEvent("onInfo", function(name) {
});
 
    myForm2 = new dhtmlXForm("myForm2");
    myForm2.loadStruct("../common/dhxform_infonote.xml?e=" + new Date().getTime());
    myForm2.enableLiveValidation(true);
}</script>
 
 
    <table>
        <tr>
            <td style="padding-right: 20px;"><div id="myForm"></div></td>
            <td><div id="myForm2"></div></td>
        </tr>
    </table>
    <div style="padding-top: 20px;">
        On this page: Help, Info, Live Validation, Tooltips, Required Fields
    </div>
    <div style="padding-top: 20px;">
        <u>Project Name</u>, <u>E-mail</u> and <u>Permanent E-mail</u> fields have tooltips. Just hover mouse over label for thouse items.
    </div>