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>