yewstack · knzai · Jul 20, 2024
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/form/Cargo.toml b/examples/form/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "form"
+version = "0.1.0"
+authors = ["Kenzi Connor <git@knz.ai>"]
+edition = "2021"
+license = "Unlicense"
+
+[dependencies]
+js-sys = "0.3"
+yew = { path = "../../packages/yew", features = ["csr"] }
+
+[dependencies.web-sys]
+version = "0.3.69"
+features = ["FormData", "HtmlFormElement"]
diff --git a/examples/form/README.md b/examples/form/README.md
@@ -0,0 +1,13 @@
+# Form Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fform)](https://examples.yew.rs/form)
+
+This example demonstrates using a form and FormData instead of accessing the fields individually other ways
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```
diff --git a/examples/form/index.html b/examples/form/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew • Form</title>
+
+    <link data-trunk rel="rust" />
+  </head>
+
+  <body></body>
+</html>
diff --git a/examples/form/src/main.rs b/examples/form/src/main.rs
@@ -0,0 +1,59 @@
+use web_sys::{FormData, HtmlFormElement};
+use yew::prelude::*;
+
+pub enum Msg {
+    Submit(SubmitEvent),
+}
+
+pub struct App {
+    names: Vec<String>,
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            names: Vec::default(),
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Submit(event) => {
+                event.prevent_default();
+                let form: HtmlFormElement = event.target_unchecked_into();
+                let form_data = FormData::new_with_form(&form).expect("form data");
+                self.names.push(format!(
+                    "{} {}",
+                    form_data.get("first").as_string().unwrap(),
+                    form_data.get("last").as_string().unwrap()
+                ));
+            }
+        }
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div>
+                <form onsubmit={ctx.link().callback(Msg::Submit)}>
+                    <label>{"Sign up"}</label>
+                    <input name="first" placeholder="First name"/>
+                    <input name="last" placeholder="Last name"/>
+                    <input type="submit"/>
+                </form>
+                <ul>
+                    { for self.names.iter().map( |name| html! {
+                        <li>{ name }</li>
+                    })}
+                </ul>
+            </div>
+        }
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}