<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,
t = false;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 100
    }, {
        type: "template",
        name: "product",
        label: "Product:",
        value: "dhtmlxForm",
        format: format_a
    }, {
        type: "template",
        name: "link",
        label: "Visit our site:",
        value: "dhtmlx.com",
        format: format_a
    }, {
        type: "template",
        label: "Advanced:",
        value: "Click me!",
        format: format_b
    }];
    myForm = new dhtmlXForm("myForm", formData);
}
function format_a(name, value) {
    if (name == "product")
        return "<b>" + value + "</b>";
    if (name == "link")
        return "<a href='http://" + value + "' target='blank'>" + value + "</a>";
}
function format_b(name, value) {
    // to access form instance from format function
    // you cann use the following method:
    // var form = this.getForm();
    return "<a href='javascript:void(0);' onclick='custom_func();'>" + value + "</a>";
}
function custom_func() {
    t = !t;
    myForm.forEachItem(function(name) {
        myForm.setItemText(name, (myForm.getItemText(name))[t ? "toLowerCase": "toUpperCase"]());
    });
}</script>
 
 
    <div id="myForm" style="height:100px;"></div>