## Form Binding
Forms allow you to map a set of variables to a single object.
If you provide a `value` attribute to a form element and the `value` attribute points to a variable that is an `object`,
then the values of the input elements of the form will be mapped to properties on the variable using their `name` attributes
when the form is submitted.
*Note*, the default action of the form is prevented unless there is an `action` attribute. Also, auto bound forms handle their inputs
on submit, not as the field values change.
Currently, the entire object bound to the form value is replaced. Partial updates may be possible in the future.
If the variable bound to the form is `reactive`, then any variables bound to the input fields SHOULD NOT be part of the
form variable, i.e. associated to the form variable via a dot annotated path, because the form variable will already be updated as the values
change.
Forms are also the way you can efficiently collect data without two-way data binding. You simply bind non-reactive variables to the form and the inputs.
Try adding an input field to the form.
```html
Notes:
```
Try adding non-reactive variables.
<body>
```html
```
</body>
<script>
```javascript
currentComponent.mount = function() {
this.variables({user:"object"},{set:{}});
this.variables({email:"string"},{set:"
[email protected]"});
this.variables({phone:"string"},{set:"555-555-5555"});
addEventListener("change",({variableName}) => {
const el = document.createElement("div");
el.innerText = JSON.stringify(this.getVariableValue(variableName));
this.shadowRoot.appendChild(el);
})
}
```
</script>