### Form Overview

The w2form object helps you work with forms. A set of various controls such as date, int, float, autocomplete, etc. can be used with w2forms object. Additionally, it provides methods for loading data from the server side, saving it back and data bindings.

#### Example 1

Below is a simple example how to use forms. It shows the minimum HTML and JavaScript you need to have a simple form. There is no form HTML as it get generated by the form. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script> </head> <body> <div id="myForm" style="width: 600px"></div> </body> <script> $(function () { $('#myForm').w2form({ name : 'myForm', fields : [ { name: 'first_name', type: 'text', required: true }, { name: 'last_name', type: 'text', required: true }, { name: 'comments', type: 'text'} ], actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html> If you do not defined any HTML, it will be automatically generated. If you want to provide your own HTML template see how to do it in the next example.

#### Example 2

This example shows how to provide HTML for the form. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script> </head> <body> <div id="myForm" style="width: 600px"> <div class="w2ui-page page-0"> <div class="w2ui-field"> <label>First Name:</label> <div> <input name="first_name" maxlength="100" size="60"/> </div> </div> <div class="w2ui-field"> <label>Last Name:</label> <div> <input name="last_name" maxlength="100" size="60"/> </div> </div> <div class="w2ui-field"> <label>Text Area:</label> <div> <textarea name="field_textarea" style="width: 385px; height: 80px;"></textarea> </div> </div> </div> <div class="w2ui-buttons"> <input type="button" value="Reset" name="reset"/> <input type="button" value="Save" name="save"/> </div> </div> </body> <script> $(function () { $('#myForm').w2form({ name : 'myForm', fields : [ { name: 'first_name', type: 'text', required: true }, { name: 'last_name', type: 'text', required: true }, { name: 'comments', type: 'text'} ], actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html> A form template can be loaded from the server or it can already be in the page. In the HTML above, the form uses some standard classes to layout field names and fields, however, there is no requirement for this. The form can also be multi-page. If it has only one page it still needs to have proper classes to define it.

#### Binding

When you initiate form, it is going to bind all fields described in the form to the actual controls on the page. The binding is done by name attribute. For each field in w2form.fields there must be a corresponding control on the page. In a similar way it is going to bind actions to buttons. For each w2form.actions there must be a corresponding button.