Published
Edited
Dec 10, 2021
Fork of Form Input
Importers
6 stars
Insert cell
Insert cell
viewof object = formWithSubmit(html`<form>
<div><label><input name="message" type="text" value="Hello, form!"> <i>message</i></label></div>
<div><label><input name="number" type="number" value="1"> <i>number</i></label></div>
<div><label><input name="hue" type="range" min=0 max=360> <i>hue</i></label></div>
<div>
<label><input name="size" type="radio" value="12"> <i>small</i></label>
<label><input name="size" type="radio" value="24" checked> <i>medium</i></label>
<label><input name="size" type="radio" value="48"> <i>large</i></label>
</div>
<input type="submit" value="Submit">
</form>`)
Insert cell
object
Insert cell
Insert cell
html`<svg
width="640"
height="64"
viewBox="0 0 640 64"
style="width:100%;max-width:640px;height:auto;display:block;background:#333;"
>
${Object.assign(
svg`<text
x="50%"
y="50%"
text-anchor="middle"
dy="0.35em"
fill="hsl(${object.hue},100%,50%)"
font-size="${object.size}"
>`,
{
textContent: object.message + " " + object.number
}
)}
</svg>`
Insert cell
Insert cell
function formWithSubmit(form) {
const container = html`<div>${form}`;
form.addEventListener("submit", event => {
event.preventDefault();
container.value = formValue(form);
container.dispatchEvent(new CustomEvent("input"));
});
form.addEventListener("input", event => {
event.preventDefault();
// Need this, because otherwise the viewof Generator catches bubbling input events
event.stopPropagation();
});
return container;
}
Insert cell
formWithSumbit = formWithSubmit
Insert cell
import { formValue } from '@mbostock/form-input'
Insert cell

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.
Learn more