2a:null 2b:["$","title",null,{"children":"Form | Alf Eaton | Observable"}] 30:[] 2e:{"id":"69bff7e0475163d8","slug":"form","title":"Form","thumbnail":"8f8ccf410e54de60eea72543ba252ed99977edc1fe587ae7b0bf3557af6a1a0d","access_level":"public","create_time":"$D2021-03-14T09:10:51.838Z","update_time":"$D2021-04-10T21:19:54.853Z","view_time":null,"first_public_time":"$D2021-03-14T09:20:42.230Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"1dccd75582c469d5","login":"hubgit","name":"Alf Eaton","avatar_url":"https://avatars-next.observableusercontent.com/7f025ee242055990272e8933562c11766adf04e1a256eda25874741e864d6f4f","tier":"starter_2024"},"version":130,"publish_version":130,"role":null,"authored":false,"authors":[{"type":"individual","id":"0955fee430221920","login":"hubgit","name":"Alf Eaton","avatar_url":"https://avatars-next.observableusercontent.com/7f025ee242055990272e8933562c11766adf04e1a256eda25874741e864d6f4f","tier":null}],"members":[{"type":"individual","id":"0955fee430221920","login":"hubgit","name":"Alf Eaton","avatar_url":"https://avatars-next.observableusercontent.com/7f025ee242055990272e8933562c11766adf04e1a256eda25874741e864d6f4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"6706da1af9678227","slug":"utilities","title":"Utilities","owner":{"id":"1dccd75582c469d5","login":"hubgit","name":"Alf Eaton"}},"type":"notebook","body":{"title":"Form","cells":[{"id":0,"value":"md`# Form`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":56,"value":"md`Import the variables like this:\n\n

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`\n\\`\\`\\`\nviewof data = form\\`\nName \n\n\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"md`Reference the \\`formStyle\\` variable somewhere in your notebook to apply the styles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md`See [a live example](https://next.observablehq.com/@hubgit/form-example).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":19,"value":"formStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"