Add a form wrapper for better UX (#820)

### Description

- Adds `<form>` wrapper and `preventDefault` handler
- Changes the inline demo and the step-by-step guide to match

### Motivation

To have a better UX: pressing Enter in the field now adds an item.

Based on the original PR mdn/content#40201

### Related issues and pull requests

- [x] mdn/content#41304

⚠️ Should be merged together.

Author: pepelsbey

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 = '';
 

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>