form-example.html

<p>
    On this page you will find a sample implementation for many HTML5 controls. The binding is set up in both
    directions, so that a change to the control also causes a change to the values, and changes to the values cause a change to the
    control.
</p>

<p>
    You can save the updater as a temporary variable in the console. In our case Chrome assigns the variable <code>temp1</code> to
    the object.
</p>

<p>
    Note that instead of <code>temp1</code> you have to take the variable from your browser.
</p>

<p>
    And then access the data array using <code>temp1.getSubject().</code>
</p>

<p>
    For example, to enable the checkbox you can set <code>temp1.getSubject().value.checkbox="YES"</code>. To deactivate the checkbox
    you have to remove the value <code>temp1.getSubject().value.checkbox=undefined</code>
</p>

<p>
    Note that you have to take the variable from your browser instead of temp1.
</p>

<p>
    At the bottom you will find the JSON with all values
</p>

<h3>Examples</h3>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-coy.css" rel="stylesheet"/>-->

<template id="example1">

    <style>

        [readonly] {
            background-color: #e9e9e9;
            border: 1px solid grey;
        }

        div {
            box-sizing: border-box;
        }

        .table {
            display: grid;
            grid-template-columns: 1fr 1fr 4fr;
        }

        .cell.control {
            padding: 5px 20px;
        }

        .cell.value {
            padding: 5px 20px;
        }

        .json {
            margin: 5px 20px;
            padding: 20px;
            border: 4px solid #424242;
            margin-top: 20px
        }