30:[] 2e:{"title":"Form","cells":[{"id":0,"value":"md`# Form`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`This notebook exports \\`form\\` for rendering a form as an input view, and \\`formStyle\\` for styling the form.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`Import the variables like this:\n\n

import {form, formStyle} from '@hubgit/form'

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`Define your form like this, and the \\`data\\` variable will be populated when the form's submitted:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`\n\\`\\`\\`\nviewof data = form\\`\nName \n\n\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`Reference the \\`formStyle\\` variable somewhere in your notebook to apply the styles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`See [a live example](https://next.observablehq.com/@hubgit/form-example).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"form = (...args) => {\n const container = document.createElement('div')\n\n const form = document.createElement('form')\n form.className = 'observable-form'\n \n form.appendChild(html(...args))\n \n form.addEventListener('submit', event => {\n event.preventDefault()\n container.value = Object.fromEntries(new FormData(form))\n container.dispatchEvent(new CustomEvent(\"input\"))\n })\n \n container.appendChild(form)\n\n return container\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"formStyle = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}