DHTMLX Docs & Samples Explorer

Button with image

Source
<meta charset="UTF-8">
    <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>
    <style>
        div.dhxform_item_label_left.button_save div.btn_txt {
            background-image: url(../common/imgs/save.gif);
            background-repeat: no-repeat;
            background-position: 11px 2px;
            padding: 0px 15px 0px 31px!important;
        }
        div.dhxform_item_label_left.button_cancel div.btn_txt {
            background-image: url(../common/imgs/cancel.gif);
            background-repeat: no-repeat;
            background-position: 11px 2px;
            padding: 0px 15px 0px 31px!important;
        }
    </style>
    <script>
var myForm,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 110,
        inputWidth: 150
    }, {
        type: "input",
        name: "name",
        label: "Full Name",
        value: "Yami Kashimoto"
    }, {
        type: "input",
        name: "addr",
        label: "Address",
        value: "東京"
    }, {
        type: "input",
        name: "mail",
        label: "Email",
        value: "yamika@mymail.jp"
    }, {
        type: "block",
        offsetTop: 20,
        offsetLeft: 20,
        inputWidth: 250,
        list: [{
            type: "button",
            value: "Save",
            className: "button_save"
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Cancel",
            className: "button_cancel",
            offsetLeft: 7
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    // or
    // myForm.loadStruct(formData, "json");
    }
</script> <div id="myForm" style="height:500px;"></div>