From 20bbc97609f39fc84141ead5fa3e420ffd3df35b Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sat, 21 Feb 2026 08:41:07 +0000
Subject: [PATCH 1/4] Enhance form with customer details and footer update

Updated the HTML form to include customer information fields, color selection, size selection, and delivery date. Changed the footer to reflect the author's name.
---
 Form-Controls/index.html | 119 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 112 insertions(+), 7 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..3130844b5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,7 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
-    <meta name="description" content="" />
+    <meta
+      name="description"
+      content="A product selection form to collect customer preferences and delivery details."
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
@@ -13,15 +16,117 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <section>
+          <h2>Customer information</h2>
+          <fieldset>
+            <legend>Identity</legend>
+            <label for="name">Name: </label>
+            <input
+              type="text"
+              id="name"
+              name="user-name"
+              pattern="[A-Za-z\s]{2,}"
+              required
+              title="Please enter your full name with at least two letters."
+            />
+
+            <label for="mail">Email: </label>
+            <input
+              type="email"
+              id="mail"
+              name="email"
+              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+              required
+              title="Please enter a valid email address."
+              autocomplete="on"
+            />
+          </fieldset>
+        </section>
+
+        <section>
+          <fieldset>
+            <legend>Choose Colour</legend>
+            <ul>
+              <li>
+                <label for="gold">
+                  <input
+                    type="radio"
+                    id="gold"
+                    name="colour"
+                    value="gold"
+                    required
+                  />
+                  Gold
+                </label>
+              </li>
+              <li>
+                <label for="silver">
+                  <input
+                    type="radio"
+                    id="silver"
+                    name="colour"
+                    value="silver"
+                    required
+                  />
+                  Silver
+                </label>
+              </li>
+              <li>
+                <label for="diamond">
+                  <input
+                    type="radio"
+                    id="diamond"
+                    name="colour"
+                    value="diamond"
+                    required
+                  />
+                  Diamond
+                </label>
+              </li>
+            </ul>
+          </fieldset>
+        </section>
+        <section>
+          <fieldset>
+            <legend>Choose Size</legend>
+            <label for="size">
+              Size:
+              <select id="size" name="size" required>
+                <option value="" disabled selected>Select a size</option>
+                <option value="xs">Extra Small</option>
+                <option value="s">Small</option>
+                <option value="m">Medium</option>
+                <option value="l">Large</option>
+                <option value="xl">Extra Large</option>
+                <option value="xxl">Extra Extra Large</option>
+              </select>
+            </label>
+          </fieldset>
+        </section>
+        <section>
+          <fieldset>
+            <legend>Choose Delivery Date</legend>
+            <label for="delivery-date">Delivery Date: </label>
+            <input
+              type="date"
+              id="delivery-date"
+              name="delivery-date"
+              min="2025-01-01"
+              max="2025-12-31"
+              required
+            />
+          </fieldset>
+        </section>
+
+        <section>
+          <p>
+            <button type="submit">Submit Details</button>
+          </p>
+        </section>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>© 2025 Abayie</p>
     </footer>
   </body>
 </html>

From f4108387da7d7fe3f52925e43fd9ec5fa284c7c1 Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sat, 21 Feb 2026 18:12:13 +0000
Subject: [PATCH 2/4] Refactor form labels and inputs for consistency

fix accessibilty score and w3c validator warnings
---
 Form-Controls/index.html | 104 ++++++++++++++-------------------------
 1 file changed, 37 insertions(+), 67 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 3130844b5..472ea9a38 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -20,70 +20,45 @@ <h1>Product Pick</h1>
           <h2>Customer information</h2>
           <fieldset>
             <legend>Identity</legend>
-            <label for="name">Name: </label>
-            <input
-              type="text"
-              id="name"
-              name="user-name"
-              pattern="[A-Za-z\s]{2,}"
-              required
-              title="Please enter your full name with at least two letters."
-            />
+            <label>
+              Name:
+              <input
+                pattern="[A-Za-z\s]{2,}"
+                required
+                title="Please enter your full name with at least two letters."
+              />
+            </label>
 
-            <label for="mail">Email: </label>
-            <input
-              type="email"
-              id="mail"
-              name="email"
-              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-              required
-              title="Please enter a valid email address."
-              autocomplete="on"
-            />
+            <label>
+              Email:
+              <input
+                type="email"
+                required
+                title="Please enter a valid email address."
+                autocomplete="on"
+              />
+            </label>
           </fieldset>
         </section>
 
         <section>
           <fieldset>
             <legend>Choose Colour</legend>
-            <ul>
-              <li>
-                <label for="gold">
-                  <input
-                    type="radio"
-                    id="gold"
-                    name="colour"
-                    value="gold"
-                    required
-                  />
-                  Gold
-                </label>
-              </li>
-              <li>
-                <label for="silver">
-                  <input
-                    type="radio"
-                    id="silver"
-                    name="colour"
-                    value="silver"
-                    required
-                  />
-                  Silver
-                </label>
-              </li>
-              <li>
-                <label for="diamond">
-                  <input
-                    type="radio"
-                    id="diamond"
-                    name="colour"
-                    value="diamond"
-                    required
-                  />
-                  Diamond
-                </label>
-              </li>
-            </ul>
+
+            <label>
+              <input type="radio" name="colour" value="gold" required />
+              Gold
+            </label>
+
+            <label>
+              <input type="radio" name="colour" value="silver" required />
+              Silver
+            </label>
+
+            <label>
+              <input type="radio" name="colour" value="diamond" required />
+              Diamond
+            </label>
           </fieldset>
         </section>
         <section>
@@ -106,15 +81,10 @@ <h2>Customer information</h2>
         <section>
           <fieldset>
             <legend>Choose Delivery Date</legend>
-            <label for="delivery-date">Delivery Date: </label>
-            <input
-              type="date"
-              id="delivery-date"
-              name="delivery-date"
-              min="2025-01-01"
-              max="2025-12-31"
-              required
-            />
+            <label>
+              Delivery Date:
+              <input type="date" min="2025-01-01" max="2025-12-31" required />
+            </label>
           </fieldset>
         </section>
 

From 80389ac5470918b0ac575eda6b739cfc0604fc0f Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sat, 21 Feb 2026 22:30:51 +0000
Subject: [PATCH 3/4] Refactor form structure

---
 Form-Controls/index.html | 120 ++++++++++++++++++---------------------
 1 file changed, 54 insertions(+), 66 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 472ea9a38..c50b312aa 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="utf-8" >
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
     <title>My form exercise</title>
     <meta
       name="description"
       content="A product selection form to collect customer preferences and delivery details."
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    >
+    <meta name="viewport" content="width=device-width, initial-scale=1" >
   </head>
   <body>
     <header>
@@ -18,81 +18,69 @@ <h1>Product Pick</h1>
       <form>
         <section>
           <h2>Customer information</h2>
-          <fieldset>
-            <legend>Identity</legend>
-            <label>
-              Name:
-              <input
-                pattern="[A-Za-z\s]{2,}"
-                required
-                title="Please enter your full name with at least two letters."
-              />
-            </label>
 
-            <label>
-              Email:
-              <input
-                type="email"
-                required
-                title="Please enter a valid email address."
-                autocomplete="on"
-              />
-            </label>
-          </fieldset>
+          <label>
+            Name:
+            <input
+              pattern="[A-Za-z\s]{2,}"
+              required
+              title="Please enter your full name with at least two letters."
+            >
+          </label>
+
+          <label>
+            Email:
+            <input
+              type="email"
+              required
+              title="Please enter a valid email address."
+              autocomplete="on"
+            >
+          </label>
         </section>
 
         <section>
-          <fieldset>
-            <legend>Choose Colour</legend>
+          <h2>Choose Colour</h2>
 
-            <label>
-              <input type="radio" name="colour" value="gold" required />
-              Gold
-            </label>
+          <label>
+            <input type="radio" name="colour" value="gold" required >
+            Gold
+          </label>
 
-            <label>
-              <input type="radio" name="colour" value="silver" required />
-              Silver
-            </label>
+          <label>
+            <input type="radio" name="colour" value="silver" required >
+            Silver
+          </label>
 
-            <label>
-              <input type="radio" name="colour" value="diamond" required />
-              Diamond
-            </label>
-          </fieldset>
+          <label>
+            <input type="radio" name="colour" value="diamond" required >
+            Diamond
+          </label>
         </section>
         <section>
-          <fieldset>
-            <legend>Choose Size</legend>
-            <label for="size">
-              Size:
-              <select id="size" name="size" required>
-                <option value="" disabled selected>Select a size</option>
-                <option value="xs">Extra Small</option>
-                <option value="s">Small</option>
-                <option value="m">Medium</option>
-                <option value="l">Large</option>
-                <option value="xl">Extra Large</option>
-                <option value="xxl">Extra Extra Large</option>
-              </select>
-            </label>
-          </fieldset>
+          <h2>Choose Size</h2>
+          <label for="size">
+            Size:
+            <select id="size" name="size" required>
+              <option value="" disabled selected>Select a size</option>
+              <option value="xs">Extra Small</option>
+              <option value="s">Small</option>
+              <option value="m">Medium</option>
+              <option value="l">Large</option>
+              <option value="xl">Extra Large</option>
+              <option value="xxl">Extra Extra Large</option>
+            </select>
+          </label>
         </section>
         <section>
-          <fieldset>
-            <legend>Choose Delivery Date</legend>
-            <label>
-              Delivery Date:
-              <input type="date" min="2025-01-01" max="2025-12-31" required />
-            </label>
-          </fieldset>
+          <h2>Choose Delivery Date</h2>
+          <label>
+            Delivery Date:
+            <input type="date" min="2025-01-01" max="2025-12-31" required >
+          </label>
         </section>
 
-        <section>
-          <p>
-            <button type="submit">Submit Details</button>
-          </p>
-        </section>
+        <button type="submit">Submit Details</button>
       </form>
     </main>
     <footer>

From f0ab22e671527a34a456fb4631a34b093fb5a58a Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sun, 22 Feb 2026 11:16:29 +0000
Subject: [PATCH 4/4] Update title attribute for name input field

---
 Form-Controls/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c50b312aa..c7cd5835c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -24,7 +24,7 @@ <h2>Customer information</h2>
             <input
               pattern="[A-Za-z\s]{2,}"
               required
-              title="Please enter your full name with at least two letters."
+              title="Please enter your name with at least two letters."
             >
           </label>
 
