From 08b4a391ad834c6b2222fd9a7f7c3dc9de637751 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sat, 17 Jan 2026 23:06:12 +0000
Subject: [PATCH 01/10] feature: add labels for customer details, (name and
 email) with strict email validation

---
 Form-Controls/index.html | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..97cbd4a6f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,7 +4,7 @@
     <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 project demonstrating webform controls" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
@@ -13,15 +13,19 @@ <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-->
+        <fieldset>
+          <legend><b>Customer Details</b></legend>
+          <label for="name">Name: </label>
+          <input type="text" id="name" name="name" minlength="3" maxlength="15" required>
+          <br>
+          <br>
+          <label for="email">Email: </label>
+          <input type="email" id="email" name="email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
+        </fieldset>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Martha Ogunbiyi</h2>
     </footer>
   </body>
 </html>

From a38961dcf7b5f72e8edf3885214d2f848a6f7d5c Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sat, 17 Jan 2026 23:22:22 +0000
Subject: [PATCH 02/10] feature: add label to select T-Shirt colour

---
 Form-Controls/index.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 97cbd4a6f..eca3cc3ab 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -22,6 +22,15 @@ <h1>Product Pick</h1>
           <label for="email">Email: </label>
           <input type="email" id="email" name="email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
         </fieldset>
+        <fieldset>
+          <legend><b>T-Shirt Color Preference</b></legend>
+          <label for="colour">Select a Colour</label>
+          <select id="colour" name="colour">
+            <option>Red</option>
+            <option>Green</option>
+            <option>Blue</option>
+            </select>
+          </fieldset>
       </form>
     </main>
     <footer>

From 102f4f9e97ddbd4560a0e1177157e59efb272b36 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sat, 17 Jan 2026 23:57:17 +0000
Subject: [PATCH 03/10] feature: add labels for T-shirt sizes

---
 Form-Controls/index.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index eca3cc3ab..d0e4155da 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -25,12 +25,27 @@ <h1>Product Pick</h1>
         <fieldset>
           <legend><b>T-Shirt Color Preference</b></legend>
           <label for="colour">Select a Colour</label>
-          <select id="colour" name="colour">
+          <select id="colour" name="colour" required>
             <option>Red</option>
             <option>Green</option>
             <option>Blue</option>
             </select>
           </fieldset>
+          <fieldset>
+            <legend><b>Choose Your T-Shirt Size</b></legend>
+            <label for="XS">XS</label>
+            <input type="radio" id="XS" name="size" value="XS"  checked>
+            <label for="S">S</label>
+            <input type="radio" id="S" name="size" value="S">
+            <label for="M">M</label>
+            <input type="radio" id="M" name="size" value="M">
+            <label for="L">L</label>
+            <input type="radio" id="L" name="size" value="L">
+            <label for="XL">XL</label>
+            <input type="radio" id="XL" name="size" value="XL">
+            <label for="XXL">XXL</label>
+            <input type="radio" id="XXL" name="size" value="XXL">
+          </fieldset>
       </form>
     </main>
     <footer>

From 0ad8180788fc2af4b6661582d15bc036bffa2327 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sun, 18 Jan 2026 00:07:31 +0000
Subject: [PATCH 04/10] refactor: wrap labels for customer details in div
 instead of using br tags for layout

---
 Form-Controls/index.html | 106 +++++++++++++++++++++------------------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d0e4155da..7fa3d8c08 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,55 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="A project demonstrating webform controls" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <fieldset>
-          <legend><b>Customer Details</b></legend>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>My form exercise</title>
+  <meta name="description" content="A project demonstrating webform controls" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+  <main>
+    <form>
+      <fieldset>
+        <legend><b>Customer Details</b></legend>
+        <div>
           <label for="name">Name: </label>
           <input type="text" id="name" name="name" minlength="3" maxlength="15" required>
-          <br>
-          <br>
+        </div>
+        <div>
           <label for="email">Email: </label>
-          <input type="email" id="email" name="email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
-        </fieldset>
-        <fieldset>
-          <legend><b>T-Shirt Color Preference</b></legend>
-          <label for="colour">Select a Colour</label>
-          <select id="colour" name="colour" required>
-            <option>Red</option>
-            <option>Green</option>
-            <option>Blue</option>
-            </select>
-          </fieldset>
-          <fieldset>
-            <legend><b>Choose Your T-Shirt Size</b></legend>
-            <label for="XS">XS</label>
-            <input type="radio" id="XS" name="size" value="XS"  checked>
-            <label for="S">S</label>
-            <input type="radio" id="S" name="size" value="S">
-            <label for="M">M</label>
-            <input type="radio" id="M" name="size" value="M">
-            <label for="L">L</label>
-            <input type="radio" id="L" name="size" value="L">
-            <label for="XL">XL</label>
-            <input type="radio" id="XL" name="size" value="XL">
-            <label for="XXL">XXL</label>
-            <input type="radio" id="XXL" name="size" value="XXL">
-          </fieldset>
-      </form>
-    </main>
-    <footer>
-      <h2>By Martha Ogunbiyi</h2>
-    </footer>
-  </body>
-</html>
+          <input type="email" id="email" name="email" required
+            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend><b>T-Shirt Color Preference</b></legend>
+        <label for="colour">Select a Colour</label>
+        <select id="colour" name="colour" required>
+          <option>Red</option>
+          <option>Green</option>
+          <option>Blue</option>
+        </select>
+      </fieldset>
+      <fieldset>
+        <legend><b>Choose Your T-Shirt Size</b></legend>
+        <label for="XS">XS</label>
+        <input type="radio" id="XS" name="size" value="XS" checked>
+        <label for="S">S</label>
+        <input type="radio" id="S" name="size" value="S">
+        <label for="M">M</label>
+        <input type="radio" id="M" name="size" value="M">
+        <label for="L">L</label>
+        <input type="radio" id="L" name="size" value="L">
+        <label for="XL">XL</label>
+        <input type="radio" id="XL" name="size" value="XL">
+        <label for="XXL">XXL</label>
+        <input type="radio" id="XXL" name="size" value="XXL">
+      </fieldset>
+    </form>
+  </main>
+  <footer>
+    <h2>By Martha Ogunbiyi</h2>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file

From 8cc8095c816bdb4c804bc37e0786e3f740018a0a Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sun, 18 Jan 2026 00:14:03 +0000
Subject: [PATCH 05/10] refactor: add a default prompt option for colour
 selection -this makes the required alt meaninigful

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7fa3d8c08..1fcce14fc 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -31,6 +31,7 @@ <h1>Product Pick</h1>
         <legend><b>T-Shirt Color Preference</b></legend>
         <label for="colour">Select a Colour</label>
         <select id="colour" name="colour" required>
+          <option>-- Select a Colour --</option>
           <option>Red</option>
           <option>Green</option>
           <option>Blue</option>

From a1812a5265d320db43892f6bb423c77daa54065c Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sun, 18 Jan 2026 00:34:33 +0000
Subject: [PATCH 06/10] feature: add a submit button -refactored colour
 selector to enable actual color selection

---
 Form-Controls/index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1fcce14fc..a4b28e3f0 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -31,10 +31,10 @@ <h1>Product Pick</h1>
         <legend><b>T-Shirt Color Preference</b></legend>
         <label for="colour">Select a Colour</label>
         <select id="colour" name="colour" required>
-          <option>-- Select a Colour --</option>
-          <option>Red</option>
-          <option>Green</option>
-          <option>Blue</option>
+          <option value="" disabled selected hidden>-- Select a Colour --</option>
+          <option value="Red" >Red</option>
+          <option value="Green" >Green</option>
+          <option value="Blue" >Blue</option>
         </select>
       </fieldset>
       <fieldset>
@@ -52,6 +52,7 @@ <h1>Product Pick</h1>
         <label for="XXL">XXL</label>
         <input type="radio" id="XXL" name="size" value="XXL">
       </fieldset>
+      <button type="submit">Submit</button>
     </form>
   </main>
   <footer>

From 33e0cbba4429f916d63b0413964ed66e2b4c476c Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sun, 18 Jan 2026 00:43:47 +0000
Subject: [PATCH 07/10] refactor: removed checked from size selector and
 replaced with required to avoid accidental checking

---
 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 a4b28e3f0..ee1288406 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -40,7 +40,7 @@ <h1>Product Pick</h1>
       <fieldset>
         <legend><b>Choose Your T-Shirt Size</b></legend>
         <label for="XS">XS</label>
-        <input type="radio" id="XS" name="size" value="XS" checked>
+        <input type="radio" id="XS" name="size" value="XS" required>
         <label for="S">S</label>
         <input type="radio" id="S" name="size" value="S">
         <label for="M">M</label>

From 65ea9f7213080eb672778404e0db7bab9d076e17 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Sun, 18 Jan 2026 01:06:49 +0000
Subject: [PATCH 08/10] refactor: refactor with minor improvement for
 accessibility & clarity

---
 Form-Controls/index.html | 55 +++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index ee1288406..bec1d7df3 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,41 +16,54 @@ <h1>Product Pick</h1>
   <main>
     <form>
       <fieldset>
-        <legend><b>Customer Details</b></legend>
+        <legend>Customer Details</legend>
         <div>
           <label for="name">Name: </label>
-          <input type="text" id="name" name="name" minlength="3" maxlength="15" required>
+          <input type="text" id="name" name="name" minlength="3" maxlength="15" autocomplete="name"
+            placeholder="enter your name" required>
         </div>
         <div>
           <label for="email">Email: </label>
-          <input type="email" id="email" name="email" required
-            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
+          <input type="email" id="email" name="email" autocomplete="email" placeholder="enter your email"
+            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
         </div>
       </fieldset>
       <fieldset>
-        <legend><b>T-Shirt Color Preference</b></legend>
+        <legend>T-Shirt Color Preference</legend>
         <label for="colour">Select a Colour</label>
         <select id="colour" name="colour" required>
           <option value="" disabled selected hidden>-- Select a Colour --</option>
-          <option value="Red" >Red</option>
-          <option value="Green" >Green</option>
-          <option value="Blue" >Blue</option>
+          <option value="Red">Red</option>
+          <option value="Green">Green</option>
+          <option value="Blue">Blue</option>
         </select>
       </fieldset>
       <fieldset>
-        <legend><b>Choose Your T-Shirt Size</b></legend>
-        <label for="XS">XS</label>
-        <input type="radio" id="XS" name="size" value="XS" required>
-        <label for="S">S</label>
-        <input type="radio" id="S" name="size" value="S">
-        <label for="M">M</label>
-        <input type="radio" id="M" name="size" value="M">
-        <label for="L">L</label>
-        <input type="radio" id="L" name="size" value="L">
-        <label for="XL">XL</label>
-        <input type="radio" id="XL" name="size" value="XL">
-        <label for="XXL">XXL</label>
-        <input type="radio" id="XXL" name="size" value="XXL">
+        <legend>Choose Your T-Shirt Size</legend>
+        <label for="XS">
+          <input type="radio" id="XS" name="size" value="XS" required>
+          XS
+        </label>
+        <label for="S">
+          <input type="radio" id="S" name="size" value="S">
+          S
+        </label>
+        <label for="M">
+          <input type="radio" id="M" name="size" value="M">
+          M
+        </label>
+        <label for="L">
+          <input type="radio" id="L" name="size" value="L">
+          L
+        </label>
+        <label for="XL">
+          <input type="radio" id="XL" name="size" value="XL">
+          XL
+        </label>
+        <label for="XXL">
+          <input type="radio" id="XXL" name="size" value="XXL">
+          XXL
+        </label>
       </fieldset>
       <button type="submit">Submit</button>
     </form>

From 20dbfec7ec893f8a2f20609cb69cfe1e539f10f2 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Mon, 19 Jan 2026 18:01:55 +0000
Subject: [PATCH 09/10] refactor: refactored to improve accessibility -applied
 regex pattern for stricter name validation - aligned legend wordings for
 consistency

---
 Form-Controls/index.html | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index bec1d7df3..8617307fd 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -18,14 +18,17 @@ <h1>Product Pick</h1>
       <fieldset>
         <legend>Customer Details</legend>
         <div>
-          <label for="name">Name: </label>
-          <input type="text" id="name" name="name" minlength="3" maxlength="15" autocomplete="name"
-            placeholder="enter your name" required>
+          <label for="name">Name:
+            <input type="text" id="name" name="name" minlength="3" maxlength="15" autocomplete="name"
+              placeholder="enter your name" pattern="^\S+$" required>
+          </label>
         </div>
+        <br>
         <div>
-          <label for="email">Email: </label>
-          <input type="email" id="email" name="email" autocomplete="email" placeholder="enter your email"
-            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
+          <label for="email">Email:
+            <input type="email" id="email" name="email" autocomplete="email" placeholder="enter your email"
+              pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
+          </label>
         </div>
       </fieldset>
       <fieldset>
@@ -39,7 +42,7 @@ <h1>Product Pick</h1>
         </select>
       </fieldset>
       <fieldset>
-        <legend>Choose Your T-Shirt Size</legend>
+        <legend>T-Shirt Size Preference</legend>
         <label for="XS">
           <input type="radio" id="XS" name="size" value="XS" required>
           XS

From 1a00ba2edb59a23ec0edb079069ac1b59d75e884 Mon Sep 17 00:00:00 2001
From: marthak1 <marthaogunbiyi196@gmail.com>
Date: Mon, 19 Jan 2026 18:15:36 +0000
Subject: [PATCH 10/10]  update: updated regext pattern

---
 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 8617307fd..5da838cbe 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -20,7 +20,7 @@ <h1>Product Pick</h1>
         <div>
           <label for="name">Name:
             <input type="text" id="name" name="name" minlength="3" maxlength="15" autocomplete="name"
-              placeholder="enter your name" pattern="^\S+$" required>
+              placeholder="enter your name" pattern=".*\S.*" required>
           </label>
         </div>
         <br>
