feat: use forms in templates (#331)

* Update code snippets to use the platform

* Add change

Author: TejasQ

.changes/platform.md

@@ -0,0 +1,6 @@
+---
+"create-tauri-app": "patch"
+"create-tauri-app-js": "patch"
+---
+
+Fix generated output to use HTML forms properly.

packages/cli/fragments/fragment-next-ts/src/pages/index.tsx

@@ -57,16 +57,19 @@ function App() {
       <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

packages/cli/fragments/fragment-next/src/pages/index.jsx

@@ -57,16 +57,19 @@ function App() {
       <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

packages/cli/fragments/fragment-preact-ts/src/app.tsx

@@ -30,16 +30,19 @@ export function App<FC>() {
       <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

packages/cli/fragments/fragment-preact/src/app.jsx

@@ -30,16 +30,19 @@ export function App() {
       <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

packages/cli/fragments/fragment-react-ts/src/App.tsx

@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

packages/cli/fragments/fragment-react/src/App.jsx

@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

packages/cli/fragments/fragment-solid/src/App.jsx

@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>