4.5 Forms

Forms play an important role in web applications. Plain HTML forms are rather basic and don't offer a lot of help with common issues such as data validation, custom controls, composite and collection structures, and so on. Kauri Forms solves these problems for you.

In contrast to the forms support of many web application frameworks, Kauri Forms is a Javascript library which runs in the browser. It is not a Java framework which manages a server-side model of your form. Kauri Forms makes the radical assumption that Javascript is available.

The form-controller sits in the browser, and directly GETs and POSTs/PUTs data to resources.

Besides the usual basic widgets, you will find things such a Google Maps widget or an Ajax-enabled upload widget.

A form's structure can be defined in Javascript (JSON), but it can also be implictly derived from annotations on a HTML form.

Below we show an example of a Javascript-defined form. A form consists of widgets, which have an ID and extend from built-in widgets. In the sample below, the IDs of the widgets are name, email and birthday. The email widget has a special property “+validators”, which means we add the listed validators to those of the base type, rather than replacing them.

var fconf = {
    createURI: "${publicUri('service:/data/contact/')}",
    type: {
        members: {
            name: "string",
            email: {
                base: "string",
                "+validators": { isEmail: {} },
                label: "e-mail"
            },
            birthday: {
                base: "date",
                yearRange: "-100:+0",
                label: "What is your date of birth?"
            },
        }
}};

In the HTML page, you put placeholders where the widgets should be inserted. These placeholders use special 'kauri-' attributes to refer back to the form module, like this:

<label kauri-role="label" kauri-idref="name"/>
<input kauri-idref="name"/>