a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
hypermedia
frontend
signals
1/**
2 * Forms Section
3 * Demonstrates form elements and two-way data binding
4 */
5
6import * as dom from "../utils";
7
8export function createFormsSection(): HTMLElement {
9 return dom.article(
10 { id: "forms" },
11 dom.h2(null, "Forms & Two-Way Binding"),
12 dom.section(
13 null,
14 dom.h3(null, "Complete Form Example"),
15 dom.p(
16 null,
17 "The ",
18 dom.code(null, "data-volt-model"),
19 " attribute provides two-way data binding.",
20 dom.small(
21 null,
22 "Changes in the input automatically update the signal, and changes to the signal automatically update the input. No manual event handlers needed!",
23 ),
24 ),
25 dom.form(
26 { "data-volt-on-submit": "$helpers.handleFormSubmit($event)" },
27 dom.fieldset(
28 null,
29 dom.legend(null, "User Information"),
30 ...dom.labelFor("Name", {
31 type: "text",
32 id: "name",
33 "data-volt-model": "formData.name",
34 placeholder: "John Doe",
35 required: true,
36 }),
37 ...dom.labelFor("Email", {
38 type: "email",
39 id: "email",
40 "data-volt-model": "formData.email",
41 placeholder: "john@example.com",
42 required: true,
43 }),
44 dom.label({ for: "bio" }, "Bio"),
45 dom.textarea({
46 id: "bio",
47 "data-volt-model": "formData.bio",
48 placeholder: "Tell us about yourself...",
49 rows: "4",
50 }),
51 dom.label({ for: "country" }, "Country"),
52 dom.select(
53 { id: "country", "data-volt-model": "formData.country" },
54 ...dom.options([["us", "United States"], ["uk", "United Kingdom"], ["ca", "Canada"], ["au", "Australia"], [
55 "other",
56 "Other",
57 ]]),
58 ),
59 dom.labelWith("Subscribe to newsletter", { type: "checkbox", "data-volt-model": "formData.newsletter" }),
60 dom.fieldset(
61 null,
62 dom.legend(null, "Plan"),
63 dom.labelWith("Free", { type: "radio", name: "plan", value: "free", "data-volt-model": "formData.plan" }),
64 dom.labelWith("Pro", { type: "radio", name: "plan", value: "pro", "data-volt-model": "formData.plan" }),
65 dom.labelWith("Enterprise", {
66 type: "radio",
67 name: "plan",
68 value: "enterprise",
69 "data-volt-model": "formData.plan",
70 }),
71 ),
72 dom.button({ type: "submit" }, "Submit Form"),
73 dom.button({ type: "reset" }, "Clear"),
74 ),
75 ),
76 dom.details(
77 null,
78 dom.summary(null, "Current Form Data (Live)"),
79 dom.pre(null, dom.code({ "data-volt-text": "JSON.stringify(formData, null, 2)" }, "Loading...")),
80 ),
81 ),
82 );
83}