Edit in JSFiddle

// add reset buttons and register their event handler
$('div.property').each(function () {
    var key = $(this).find('input, textarea, select').attr('name');
    var b = document.createElement('button');
    $(b).addClass('reset');
    $(b).attr('tabindex', '-1');
    $(b).on('click', function () {
        var initVal = $('form:eq(0)').uicForm3('initVal', key);
        $('form:eq(0)').uicForm3('val', key, initVal);
    });
    var tn = document.createTextNode('reset');
    b.appendChild(tn);
    $(this).append(b);
});

// set defaults for uicForm3
$.fn.uicForm3.defaults = {
    onPropertyModifiedStateChange: function (elements, name, initValue, currentValue, modified, e) {
        if (modified === true) {
            $(elements[0]).closest('div.property').addClass('modified');
            $(elements[0]).closest('div.property').find('.reset').show();
        } else {
            $(elements[0]).closest('div.property').removeClass('modified');
            $(elements[0]).closest('div.property').find('.reset').hide();
        }
    },
    onFormModifiedStateChange: function (modified, e) {
        if (modified === true) {
            $('form:eq(0)').addClass('modified');
        } else {
            $('form:eq(0)').removeClass('modified');
        }
    }
}

// apply uicForm3 to the form
$('form:eq(0)').uicForm3();

// register actions for the click event of the action buttons
$('#setInitialData').on('click', function (e) {
    $('form:eq(0)').uicForm3('initVal', 'firstname', 'John Winston');
});

$('#setData').on('click', function (e) {
    $('form:eq(0)').uicForm3('val', 'firstname', 'John Winston');
});
$('#getInitialData').on('click', function (e) {
    $('#rawdata').html($('form:eq(0)').uicForm3('initVal', 'firstname'));
});

$('#getData').on('click', function (e) {
    $('#rawdata').html($('form:eq(0)').uicForm3('val', 'firstname'));
});

$('#reset').on('click', function (e) {
    $('form:eq(0)').uicForm3('resetFields');
});
$('#wipe').on('click', function (e) {
    $('form:eq(0)').uicForm3('wipe');
});
$('#clear').on('click', function (e) {
    $('form:eq(0)').uicForm3('clear');
});

// This part is less interesting. It's just the data-definition and a syntax highlighter for the json in this example that is not needed for the form handling in any way.

var data = [{
    id: 1,
    title: "mr",
    firstname: "John",
    lastname: "Lennon",
    birthday: "1940-10-09",
    nationality: "gb",
    bands: ["The Beatles", "Plastic Ono Band"]
}]

var d = data[0];
$('form:eq(0)').uicForm3('initData', d);


    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

<form>
    <div class="wrapper float border">
        <div class="property">
            <label for="id">id</label>
            <input type="text" id="id" name="id" value="" placeholder="new record" readonly="readonly">
        </div>
        <div class="property divtitle">
            <label>title</label>
            <div>
                <input type="radio" id="title_mr" name="title" value="mr">
                <label for="title_mr">Mr.</label>
                <input type="radio" id="title_ms" name="title" value="ms">
                <label for="title_ms">Ms.</label>
            </div>
        </div>
        <div class="property">
            <label for="firstname">firstname</label>
            <input type="text" id="firstname" name="firstname" value="" placeholder="firstname">
        </div>
        <div class="property">
            <label for="lastname">lastname</label>
            <input type="text" id="lastname" name="lastname" value="" placeholder="lastname">
        </div>
        <div class="property">
            <label for="birthday">birthday</label>
            <input type="date" id="birthday" name="birthday" value="" placeholder="birthday">
        </div>
        <div class="property">
            <label for="nationality">born in:</label>
            <select name="nationality">
                <option value="">-- nothing selected --</option>
                <option value="gb">United Kingdom</option>
                <option value="us">United States</option>
                <option value="jp">Japan</option>
            </select>
        </div>
        <div class="property divbands">
            <label>Bands</label>
            <br>
            <div>
                <div>
                    <input type="checkbox" id="bands_rs" name="bands" value="Rolling Stones">
                    <label for="bands_rs">Rolling Stones</label>
                    <br>
                    <input type="checkbox" id="bands_beatles" name="bands" value="The Beatles">
                    <label for="bands_beatles">The Beatles</label>
                    <br>
                    <input type="checkbox" id="bands_pob" name="bands" value="Plastic Ono Band">
                    <label for="bands_pob">Plastic Ono Band</label>
                </div>
                <div>
                    <input type="checkbox" id="bands_who" name="bands" value="The Who">
                    <label for="bands_who">The Who</label>
                    <br>
                    <input type="checkbox" id="bands_wings" name="bands" value="Wings">
                    <label for="bands_wings">Wings</label>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="message">
            <div class="initial">Your form is in initial state.</div>
            <div class="unsaved">You have unsaved data.</div>
        </div>
    </div> <pre id="rawdata" class="wrapper float"></pre>

    <div class="wrapper buttons">
        <button id="setInitialData">set firstname initial value</button>
        |
        <button id="setData">set firstname current value</button>
        <hr>
        <button id="getInitialData">get firstname Initial value</button>
        |
        <button id="getData">get firstname current value</button>
        <hr>
        <button id="reset">reset</button>
        <button id="wipe">wipe</button>
        <button id="clear">clear</button>
    </div>
</form>