From 16c7813b3fa793a48c22717a75d4d787ae4a568a Mon Sep 17 00:00:00 2001
From: Vadim Makeev <vmakeev@mozilla.com>
Date: Mon, 22 Sep 2025 19:14:27 +0200
Subject: [PATCH] Add a form wrapper for better UX

---
 .../document-manipulation/shopping-list-finished.html     | 8 +++++---
 javascript/apis/document-manipulation/shopping-list.html  | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/javascript/apis/document-manipulation/shopping-list-finished.html b/javascript/apis/document-manipulation/shopping-list-finished.html
index f03d4c4184..da1f376fea 100644
--- a/javascript/apis/document-manipulation/shopping-list-finished.html
+++ b/javascript/apis/document-manipulation/shopping-list-finished.html
@@ -20,11 +20,11 @@
 
     <h1>My shopping list</h1>
 
-    <div>
+    <form>
       <label for="item">Enter a new item:</label>
       <input type="text" name="item" id="item">
       <button>Add item</button>
-    </div>
+    </form>
 
     <ul>
 
@@ -35,7 +35,9 @@ <h1>My shopping list</h1>
       const input = document.querySelector('input');
       const button = document.querySelector('button');
 
-      button.addEventListener('click', () => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+
         const myItem = input.value;
         input.value = '';
 
diff --git a/javascript/apis/document-manipulation/shopping-list.html b/javascript/apis/document-manipulation/shopping-list.html
index e7903762ec..25eb40defa 100644
--- a/javascript/apis/document-manipulation/shopping-list.html
+++ b/javascript/apis/document-manipulation/shopping-list.html
@@ -20,11 +20,11 @@
 
     <h1>My shopping list</h1>
 
-    <div>
+    <form>
       <label for="item">Enter a new item:</label>
       <input type="text" name="item" id="item">
       <button>Add item</button>
-    </div>
+    </form>
 
     <ul>