forms-2.html

<div class="content">
    <div id="example_title">
        <h1>Field Types</h1>
        Because you can use your own HTML you can create any custom field types. All you need to do is to bind your fields to the w2form object so 
        you can take advantage of its methods and properties. The w2form object has implementation of most common field types as you can see in the 
        example below:
    </div>
    <div id="example_view"></div>
        Below is the list of supported field types and what corresponding HTML element they need. Please note that there is no &lt;select&gt; 
        element. Similar functionality is done with list (single item selection) or enum (multi items selection).
        <table class="list">
            <tr><td> text </td>         <td> input[type=text] or textarea </td></tr>
            <tr><td> int </td>            <td> input[type=text] </td></tr>
            <tr><td> float </td>        <td> input[type=text] </td></tr>
            <tr><td> hex </td>            <td> input[type=text] </td></tr>
            <tr><td> money </td>        <td> input[type=text] </td></tr>
            <tr><td> alphanumeric </td>    <td> input[type=text] </td></tr>
            <tr><td> email </td>        <td> input[type=text] </td></tr>
            <tr><td> checkbox </td>        <td> input[type=checkbox] </td></tr>
            <tr><td> password </td>        <td> input[type=password] </td></tr>
            <tr><td> date </td>            <td> input[type=text] </td></tr>
            <tr><td> list </td>            <td> input[type=text] </td></tr>
            <tr><td> enum </td>            <td> input[type=text] </td></tr>
        </table>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px;"></div>

<!--CODE-->
<script>
$(function () {
    $('#form').w2form({ 
        name     : 'form',
        url      : 'server/post',
        header   : 'Field Types',
        formURL  : 'data/form.html', 
        fields: [
            { name: 'field_text', type: 'text', required: true },
            { name: 'field_alpha', type: 'alphaNumeric', required: true },
            { name: 'field_int', type: 'int', required: true },
            { name: 'field_float', type: 'float', required: true },
            { name: 'field_date', type: 'date' },
            { name: 'field_list', type: 'select', required: true, 
                options: { items: ['Adams, John', 'Johnson, Peter', 'Lewis, Frank', 'Cruz, Steve', 'Donnun, Nick'] } },
            { name: 'field_enum', type: 'enum', required: true, 
                options: { items: ['Adams, John', 'Johnson, Peter', 'Lewis, Frank', 'Cruz, Steve', 'Donnun, Nick'] } },
            { name: 'field_textarea', type: 'text'}
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                var obj = this;
                this.save({}, function (data) { 
                    if (data.status == 'error') {
                        console.log('ERROR: '+ data.message);
                        return;
                    }
                    obj.clear();
                });
            }
        }
    });
});
</script>