From fcc7fdf720b41d1a19366e4aeedab71f71c11a7b Mon Sep 17 00:00:00 2001
From: Ales-Os-Dev_Lab <alex.o.okorefe@gmail.com>
Date: Sat, 31 Jan 2026 16:07:47 +0000
Subject: [PATCH 1/5] added customer name and validation to index.html

---
 Form-Controls/index.html | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..e17cea1f4 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" />
@@ -13,10 +13,23 @@ <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-->
+    
+        <div>
+  
+          <label for="CustomerFullName">*Customer's Full Name:</label>
+
+  
+          <input
+            type="text"
+            id="CustomerFullName"
+            name="CustomerFullName"
+            placeholder="e.g. John Smith"
+            required
+            minlength="2"
+            maxlength="100"
+          />
+
+        </div>
       </form>
     </main>
     <footer>

From 66337da4337ff79097752e6aa4662e89c4ec356b Mon Sep 17 00:00:00 2001
From: Ales-Os-Dev_Lab <alex.o.okorefe@gmail.com>
Date: Sat, 31 Jan 2026 17:21:21 +0000
Subject: [PATCH 2/5] Email validation and notes added to index.html

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e17cea1f4..5b903f4ce 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,22 +12,43 @@
       <h1>Product Pick</h1>
     </header>
     <main>
+
+      <!-- Requirements:
+        - Collect a valid customer name (min 2 characters)
+        - Collect a valid customer email (must be a valid email address)
+        - Collect a t-shirt colour (must be 1 of 3 colours)
+        - Collect a t-shirt size (must be one of: XS, S, M, L, XL, XXL)
+        - All fields are required
+        - HTML only (no CSS / JavaScript)
+         - Do not write a form action for this project. -->
+     
       <form>
-    
+          <!--
+          Customer name collection:
+          - min 2 characters for validation
+          - field is required
+          - placeholder text example provided
+          -->    
         <div>
-  
-          <label for="CustomerFullName">*Customer's Full Name:</label>
+          <label for="CustomerFullName">*Customer's Full Name:</label>   
+          <input type="text" id="CustomerFullName" name="CustomerFullName" placeholder="e.g. John Smith" required minlength="2"/>
+        </div>
+
+        <!--
+          Customer email collection:
+          - type = "email" for validation
+          - field is required
+          - placeholder text example provided
+          -->
+
+        <div>
+          <label for="CustomerEmail">*Customer's Email:</label>
+          <input type="email" id="CustomerEmail" name="CustomerEmail" placeholder="e.g. john@example.com" required>
+        </div>
+
+</section>
 
-  
-          <input
-            type="text"
-            id="CustomerFullName"
-            name="CustomerFullName"
-            placeholder="e.g. John Smith"
-            required
-            minlength="2"
-            maxlength="100"
-          />
+<section>
 
         </div>
       </form>

From 570f4da333501e886a6cc747f14dd59a7423637f Mon Sep 17 00:00:00 2001
From: Ales-Os-Dev_Lab <alex.o.okorefe@gmail.com>
Date: Sat, 31 Jan 2026 17:51:49 +0000
Subject: [PATCH 3/5] Included t-shirt selection options to form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 5b903f4ce..c352bc524 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,7 +12,9 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-
+      <section>
+        <h2>Customer Information:</h2>
+        <p>Please fill in your details below:</p>
       <!-- Requirements:
         - Collect a valid customer name (min 2 characters)
         - Collect a valid customer email (must be a valid email address)
@@ -46,16 +48,62 @@ <h1>Product Pick</h1>
           <input type="email" id="CustomerEmail" name="CustomerEmail" placeholder="e.g. john@example.com" required>
         </div>
 
-</section>
+      </section>
+
+      <section>
+
+        <h2> T-Shirt Selection:</h2>
+
+        <p>Select your preferred T-shirt colour and size: </p>
 
-<section>
+        <!-- T-Shirt Colour Selection:
+        - type = "radio" for selection mandatory one choice
+        - field is required  
+        -->
+
+        <div>
+
+          <fieldset>
+            <legend>*T-Shirt Colour:</legend>
+            <label for="ColourRed">Red</label>
+            <input type="radio" id="ColourRed" name="T-ShirtColourSelection" value="Red" required>
+            <label for="ColourBlue">Blue</label> 
+            <input type="radio" id="ColourBlue" name="T-ShirtColourSelection" value="Blue" required>
+            <label for="ColourGreen">Green</label>
+            <input type="radio" id="ColourGreen" name="T-ShirtColourSelection" value="Green" required>
+          </fieldset>
 
         </div>
+
+      <!-- T-Shirt Size Selection:
+      - dropdown select for size options
+      - field is required  
+      -->
+
+        <div>
+
+          <fieldset>
+            <legend>*T-Shirt Size:</legend>
+            <label for="TShirtSize">Select Size:</label>
+            <select id="TShirtSize" name="TShirtSize" required>
+            <option value="XS">XS</option>
+            <option value="S">S</option>
+            <option value="M">M</option>
+            <option value="L">L</option>
+            <option value="XL">XL</option>
+            <option value="XXL">XXL</option>
+            </select>
+          </fieldset>
+
+        </div>
+
+      </section>
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By ALEX OKOREFE</h2>
     </footer>
   </body>
 </html>

From 6b52590f07b786e64f8c0c9d637a5058d8084f1a Mon Sep 17 00:00:00 2001
From: Ales-Os-Dev_Lab <alex.o.okorefe@gmail.com>
Date: Mon, 2 Feb 2026 20:42:41 +0000
Subject: [PATCH 4/5] Updated customer instructions for required fields

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c352bc524..81e3ba937 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,6 +6,15 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Requirements:
+        - Collect a valid customer name (min 2 characters)
+        - Collect a valid customer email (must be a valid email address)
+        - Collect a t-shirt colour (must be 1 of 3 colours)
+        - Collect a t-shirt size (must be one of: XS, S, M, L, XL, XXL)
+        - All fields are required
+        - HTML only (no CSS / JavaScript)
+        - Do not write a form action for this project. -->
   </head>
   <body>
     <header>
@@ -14,15 +23,9 @@ <h1>Product Pick</h1>
     <main>
       <section>
         <h2>Customer Information:</h2>
-        <p>Please fill in your details below:</p>
-      <!-- Requirements:
-        - Collect a valid customer name (min 2 characters)
-        - Collect a valid customer email (must be a valid email address)
-        - Collect a t-shirt colour (must be 1 of 3 colours)
-        - Collect a t-shirt size (must be one of: XS, S, M, L, XL, XXL)
-        - All fields are required
-        - HTML only (no CSS / JavaScript)
-         - Do not write a form action for this project. -->
+        <p>Please fill in your details below: <br> 
+        * indicates required fields</p>
+      
      
       <form>
           <!--

From 6866b17344711af01a0992355ce97c53659addd9 Mon Sep 17 00:00:00 2001
From: Ales-Os-Dev_Lab <alex.o.okorefe@gmail.com>
Date: Mon, 2 Feb 2026 20:48:12 +0000
Subject: [PATCH 5/5] Improved spacing between customer name and email inputs
 to improve lighthouse accessibility score

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 81e3ba937..31fafd841 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -38,18 +38,19 @@ <h2>Customer Information:</h2>
           <label for="CustomerFullName">*Customer's Full Name:</label>   
           <input type="text" id="CustomerFullName" name="CustomerFullName" placeholder="e.g. John Smith" required minlength="2"/>
         </div>
+        <br>
 
-        <!--
-          Customer email collection:
-          - type = "email" for validation
-          - field is required
-          - placeholder text example provided
-          -->
+        <!-- Customer email collection:
+          - type = "email" for validation
+          - field is required
+          - placeholder text example provided
+          -->
 
         <div>
           <label for="CustomerEmail">*Customer's Email:</label>
           <input type="email" id="CustomerEmail" name="CustomerEmail" placeholder="e.g. john@example.com" required>
         </div>
+        <br>
 
       </section>
 
