The first two parts were about the on-board tools that HTML and Javascript provide for developing great forms. Now let's get to the missing parts.

The glue

However, besides these great capabilities that the browser already offers, there are still a few small parts missing to make a form perfect. Among others, the data storage, the sending of the data and the processing of the server response.

These can, as always, be closed with custom javascript. There are already many great extensions, plug-ins and code samples to implement the missing parts.

Why did we decide to develop our own solution for the missing parts? The simple and rational answer is that none of the solutions meet our requirements 100%. The less rational answer is that we can do it and have a lot of fun developing Monster.

Here we have a normal simple form.

So what do we need? First, a way to load data from a data source, then a way to display this data in the form, and finally to submit the form again.

Custom elements

We decided to use custom elements as the basis for our form. On the one hand we find the technology impressive and on the other hand we can encapsulate the functionality well.

We use the CustomElement class from the Monster library for our form. As tag name we use the tag monster-form.

class Form extends CustomElement {
    static getTag() {
        return "monster-form"
    }
}

For data storage we use the Javascript Proxy object, which we extended with some tape. We call the object ProxyObserver.

The data itself comes via a DataSource object from the Monster library.

The finished class can be found in the Monster Form NPM Repos @schukai/component-form.

Besides the CustomElement we also use the ProxyObserver and the Updater class. This allows us to react to changes in the data.

Now we can include the form in an HTML page.

<monster-form
        data-monster-datasource="restapi"
        data-monster-datasource-arguments="">
  <input name="fieldIID" 
         id="fieldIID" 
         data-monster-bind="path:iid"
         data-monster-attributes="value path:iid">

   <!-- more fields -->

</monster-form>

As far as here follows more ...

References

• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
• npmjs.com/package/@schukai/component-form
• monsterjs.org/en/doc/1.24.0/Monster.DOM.CustomControl.html
• monsterjs.org/en/doc/components/form/1.7.0/
• developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements