w2form.formHTML | JavaScript UI - w2ui

w2form.formHTML

Form HTML template.

String, default = ''

There are four ways you can define form HTML template (in order of preference):

.formURL - load from server
.formHTML - define in JavaScript
innerHTML of.box
auto generated (see .generateHTML)

The following example shows how to define HTML template in JavaScript

let form = new w2form({
    name: 'form',
    style: 'border: 0px; background-color: transparent;',
    formHTML:
        '<div class="w2ui-page page-0">'+
        '    <div class="w2ui-field">'+
        '        <label>First Name</label>'+
        '        <div>'+
        '            <input name="first_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Last Name</label>'+
        '        <div>'+
        '            <input name="last_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Email</label>'+
        '        <div>'+
        '            <input name="email" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '</div>'+
        '<div class="w2ui-buttons">'+
        '   <button class="w2ui-btn" name="reset">Reset</button>'+
        '    <button class="w2ui-btn w2ui-btn-green" name="save">Save</button>'+
        '</div>',
    fields: [
        { field: 'first_name', type: 'text', required: true },
        { field: 'last_name', type: 'text', required: true },
        { field: 'email', type: 'email' }
    ],
    record: {
        first_name : 'John',
        last_name  : 'Doe',
        email      : 'jdoe@email.com'
    },
    actions: {
        "save": function () { this.validate(); },
        "reset": function () { this.clear(); },
    }
});

You will still need a container #form to render the form.

User Comments

comments powered by Disqus