form = (...args) => {
const container = document.createElement('div')
const form = document.createElement('form')
form.className = 'observable-form'
form.appendChild(html(...args))
form.addEventListener('submit', event => {
event.preventDefault()
container.value = Object.fromEntries(new FormData(form))
container.dispatchEvent(new CustomEvent("input"))
})
container.appendChild(form)
return container
}
formStyle = html`<style>
.observable-form {
font: 14px Roboto, sans-serif;
}
.observable-form label,
.observable-form input,
.observable-form select,
.observable-form textarea {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 400px;
margin-top: 4px;
}
.observable-form label,
.observable-form button {
margin: 16px 0;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
