Something went wrong. Try again.
a reactive (signals based) hypermedia web framework (wip) stormlightlabs.github.io/volt
hypermedia frontend signals
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384/** * Forms Section * Demonstrates form elements and two-way data binding */
import * as dom from "../utils";
export function createFormsSection(): HTMLElement { return dom.article( { id: "forms" }, dom.h2(null, "Forms & Two-Way Binding"), dom.section( null, dom.h3(null, "Complete Form Example"), dom.p( null, "The ", dom.code(null, "data-volt-model"), " attribute provides two-way data binding.", dom.small( null, "Changes in the input automatically update the signal, and changes to the signal automatically update the input. No manual event handlers needed!", ), ), dom.form( { "data-volt-on-submit": "$helpers.handleFormSubmit($event)" }, dom.fieldset( null, dom.legend(null, "User Information"), ...dom.labelFor("Name", { type: "text", id: "name", "data-volt-model": "formData.name", placeholder: "John Doe", required: true, }), ...dom.labelFor("Email", { type: "email", id: "email", "data-volt-model": "formData.email", placeholder: "john@example.com", required: true, }), dom.label({ for: "bio" }, "Bio"), dom.textarea({ id: "bio", "data-volt-model": "formData.bio", placeholder: "Tell us about yourself...", rows: "4", }), dom.label({ for: "country" }, "Country"), dom.select( { id: "country", "data-volt-model": "formData.country" }, ...dom.options([["us", "United States"], ["uk", "United Kingdom"], ["ca", "Canada"], ["au", "Australia"], [ "other", "Other", ]]), ), dom.labelWith("Subscribe to newsletter", { type: "checkbox", "data-volt-model": "formData.newsletter" }), dom.fieldset( null, dom.legend(null, "Plan"), dom.labelWith("Free", { type: "radio", name: "plan", value: "free", "data-volt-model": "formData.plan" }), dom.labelWith("Pro", { type: "radio", name: "plan", value: "pro", "data-volt-model": "formData.plan" }), dom.labelWith("Enterprise", { type: "radio", name: "plan", value: "enterprise", "data-volt-model": "formData.plan", }), ), dom.button({ type: "submit" }, "Submit Form"), dom.button({ type: "reset" }, "Clear"), ), ), dom.details( null, dom.summary(null, "Current Form Data (Live)"), dom.pre(null, dom.code({ "data-volt-text": "JSON.stringify(formData, null, 2)" }, "Loading...")), ), ), );}