Form: Overview | JavaScript UI

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="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="myForm" style="height: 350px; width: 800px"></div>
</body>
<script type="module">
import { w2form } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let form = new w2form({
    name: 'myForm',
    fields: [
        { name: 'first_name', type: 'text', required: true,
            html: {
                label: 'First Name',
                attr: 'style="width: 200px"'
            }
        },
        { name: 'last_name',  type: 'text', required: true,
            html: {
                label: 'Last Name',
                attr: 'style="width: 200px"'
            }
        },
        { name: 'comments',  type: 'textarea',
            html: {
                label: 'Comments',
                attr: 'style="height: 150px; width: 500px"'
            }
        }
    ],
    actions: {
        Reset() {
            this.clear()
        },
        Save() {
            this.save()
        }
    }
})
form.render('#myForm')
</script>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="myForm" style="height: 350px; width: 800px"></div>
</body>
<script type="module">
import { w2form } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let form = new w2form({
    name: 'myForm',
    fields: [
        { name: 'first_name', type: 'text', required: true,
            html: {
                label: 'First Name',
                attr: 'style="width: 200px"'
            }
        },
        { name: 'last_name',  type: 'text', required: true,
            html: {
                label: 'Last Name',
                attr: 'style="width: 200px"'
            }
        },
        { name: 'comments',  type: 'textarea',
            html: {
                label: 'Comments',
                attr: 'style="height: 150px; width: 500px"'
            }
        }
    ],
    actions: {
        Reset() {
            this.clear()
        },
        Save() {
            this.save()
        }
    }
})
form.render('#myForm')
</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="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="myForm" style="height: 350px; width: 800px;" name="myForm" class="w2ui-reset w2ui-form">
        <div class="w2ui-page page-0" style="top: 0px; bottom: 58.2031px; display: block;">
            <div class="w2ui-form-page">
                <div class="w2ui-field w2ui-span6 w2ui-required">
                    <label>First Name</label>
                    <div><input id="first_name" name="first_name" class="w2ui-input " type="text" style="width: 200px" tabindex="1"></div>
                </div>
                <div class="w2ui-field w2ui-span6 w2ui-required">
                    <label>Last Name</label>
                    <div><input id="last_name" name="last_name" class="w2ui-input " type="text" style="width: 200px" tabindex="2"></div>
                </div>
                <div class="w2ui-field w2ui-span6">
                    <label>Comments</label>
                    <div><textarea id="comments" name="comments" class="w2ui-input " style="height: 150px; width: 500px" tabindex="3">

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="myForm" style="height: 350px; width: 800px;" name="myForm" class="w2ui-reset w2ui-form">
        <div class="w2ui-page page-0" style="top: 0px; bottom: 58.2031px; display: block;">
            <div class="w2ui-form-page">
                <div class="w2ui-field w2ui-span6 w2ui-required">
                    <label>First Name</label>
                    <div><input id="first_name" name="first_name" class="w2ui-input " type="text" style="width: 200px" tabindex="1"></div>
                </div>
                <div class="w2ui-field w2ui-span6 w2ui-required">
                    <label>Last Name</label>
                    <div><input id="last_name" name="last_name" class="w2ui-input " type="text" style="width: 200px" tabindex="2"></div>
                </div>
                <div class="w2ui-field w2ui-span6">
                    <label>Comments</label>
                    <div><textarea id="comments" name="comments" class="w2ui-input " style="height: 150px; width: 500px" tabindex="3">

Form Overview

Example 1

Example 2

Binding

User Comments