From 8ce5a1add7d2b0aadc8cf1adbec40a8d57675dfb Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 18:49:45 +0100
Subject: [PATCH 01/12] creating form Fist name inpute element

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..c8565f857 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,7 +13,14 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
+        <!-- First name-->
+         <div class="form-group">
+          <label for = "first-name">First Name</label>
+          <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
+        arial-describedby="fnameHelp"</>
+          <small id="fnameHelp">Must be at least 2 characters long</small>
+         </div>
+        
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->

From 6f1279a1a9c016354d9a968d563daf8710ea478d Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 18:53:06 +0100
Subject: [PATCH 02/12] created form last name inpute element

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c8565f857..1630b72cd 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -20,6 +20,14 @@ <h1>Product Pick</h1>
         arial-describedby="fnameHelp"</>
           <small id="fnameHelp">Must be at least 2 characters long</small>
          </div>
+          <!-- Last name-->
+          <div class="form-group">
+          <label for = "last-name">Last Name</label>
+          <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
+        arial-describedby="lnameHelp"</>
+          <small id="lnameHelp">Must be at least 2 characters long</small>
+         </div>
+
         
         <!-- 
           try writing out the requirements first as comments

From 7d5b6cd96beab26e46b9255c537c5a41fa86158d Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 18:55:14 +0100
Subject: [PATCH 03/12]  created email inpute element

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1630b72cd..fe15f1199 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -27,6 +27,13 @@ <h1>Product Pick</h1>
         arial-describedby="lnameHelp"</>
           <small id="lnameHelp">Must be at least 2 characters long</small>
          </div>
+          <!-- Email-->
+          <div class="form-group">
+          <label for = "email">Email</label>
+          <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+        arial-describedby="emailHelp"</>
+          <small id="emailHelp">Must be a valid email address</small>
+          </div>
 
         
         <!-- 

From c0d5aa20a8b6d4cca4780af5bae9d93eca55a1e2 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 20:02:40 +0100
Subject: [PATCH 04/12] replace non-semantic div with semantic section tags

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index fe15f1199..55f90ca45 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,26 +14,26 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- First name-->
-         <div class="form-group">
+         <section class="form-group">
           <label for = "first-name">First Name</label>
           <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
         arial-describedby="fnameHelp"</>
           <small id="fnameHelp">Must be at least 2 characters long</small>
-         </div>
+         </section>
           <!-- Last name-->
-          <div class="form-group">
+          <section class="form-group">
           <label for = "last-name">Last Name</label>
           <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
         arial-describedby="lnameHelp"</>
           <small id="lnameHelp">Must be at least 2 characters long</small>
-         </div>
+         </section>
           <!-- Email-->
-          <div class="form-group">
+          <section class="form-group">
           <label for = "email">Email</label>
           <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
         arial-describedby="emailHelp"</>
           <small id="emailHelp">Must be a valid email address</small>
-          </div>
+          </section>
 
         
         <!-- 

From c93d2a7c7e4fa6ed308d2c7326573b89dd11b945 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 20:08:28 +0100
Subject: [PATCH 05/12] Created password input element

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 55f90ca45..a440700ec 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -34,6 +34,14 @@ <h1>Product Pick</h1>
         arial-describedby="emailHelp"</>
           <small id="emailHelp">Must be a valid email address</small>
           </section>
+          <!-- Password-->
+          <section class="form-group">
+          <label for = "password">Password</label>
+          <input type="password" id="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+        arial-describedby="passwordHelp"</>
+          <small id="passwordHelp">Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character</small>
+          </section>
+          
 
         
         <!-- 

From 2587fb83b7cc0469060ba53ea402ebeb16642455 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 20:20:04 +0100
Subject: [PATCH 06/12] creating color input element and Size input element

---
 Form-Controls/index.html | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a440700ec..faf42536a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -41,9 +41,34 @@ <h1>Product Pick</h1>
         arial-describedby="passwordHelp"</>
           <small id="passwordHelp">Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character</small>
           </section>
+          <!--Shirt Color-->
+          <section class="form-group">
+          <label for = "shirt-color">Shirt Color</label>
+          <select id="shirt-color" name="shirt-color" required>
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+            </select> 
+          </section>
+          <!---Shirt Size-->
+          <section class="form-group">
+          <label for = "shirt-size">Shirt Size</label>
+          <select id="shirt-size" name="shirt-size" required>
+            <option value="">Select a size</option>
+            <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>
+          </section> 
+          <!--Submit button-->
+          <section class="form-group">
+            <button type="submit">Submit</button>
+          </section>
           
-
-        
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->

From 7b3e78e5b03a5c3bd65ee41b7b1c7123b33d5e68 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 20:23:06 +0100
Subject: [PATCH 07/12]  writing the requirements and the foot note update

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index faf42536a..47ec5c0e1 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -68,15 +68,19 @@ <h1>Product Pick</h1>
           <section class="form-group">
             <button type="submit">Submit</button>
           </section>
-          
-        <!-- 
+
+         <!-- 
+ What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
+What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
+What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Tobias Amaechina</p>
     </footer>
   </body>
 </html>

From 790019ba487dab0888d73b9ba4f49723be6d48cf Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 22:01:21 +0100
Subject: [PATCH 08/12]  fixing the closing '<code></select></code>' tag at
 line 65 and changing arial-describedby to aria-describedby in the fistname,
 last name and email, password  input element

---
 Form-Controls/index.html | 43 +++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 47ec5c0e1..f52cd87ee 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,35 +14,35 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- First name-->
-         <section class="form-group">
+         <fieldset>
           <label for = "first-name">First Name</label>
           <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
-        arial-describedby="fnameHelp"</>
+        aria-describedby="fnameHelp"</>
           <small id="fnameHelp">Must be at least 2 characters long</small>
-         </section>
+         </fieldset>
           <!-- Last name-->
-          <section class="form-group">
+          <fieldset>
           <label for = "last-name">Last Name</label>
           <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
-        arial-describedby="lnameHelp"</>
+        aria-describedby="lnameHelp"</>
           <small id="lnameHelp">Must be at least 2 characters long</small>
-         </section>
+         </fieldset>
           <!-- Email-->
-          <section class="form-group">
+          <fieldset>
           <label for = "email">Email</label>
           <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-        arial-describedby="emailHelp"</>
+        aria-describedby="emailHelp"</>
           <small id="emailHelp">Must be a valid email address</small>
-          </section>
+          </fieldset>
           <!-- Password-->
-          <section class="form-group">
+          <fieldset>
           <label for = "password">Password</label>
           <input type="password" id="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
-        arial-describedby="passwordHelp"</>
+        aria-describedby="passwordHelp"</>
           <small id="passwordHelp">Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character</small>
-          </section>
+          </fieldset>
           <!--Shirt Color-->
-          <section class="form-group">
+          <fieldset>
           <label for = "shirt-color">Shirt Color</label>
           <select id="shirt-color" name="shirt-color" required>
             <option value="">Select a color</option>
@@ -50,9 +50,9 @@ <h1>Product Pick</h1>
             <option value="blue">Blue</option>
             <option value="green">Green</option>
             </select> 
-          </section>
+          </fieldset>
           <!---Shirt Size-->
-          <section class="form-group">
+          <fieldset>      
           <label for = "shirt-size">Shirt Size</label>
           <select id="shirt-size" name="shirt-size" required>
             <option value="">Select a size</option>
@@ -62,12 +62,15 @@ <h1>Product Pick</h1>
             <option value="L">L</option>
             <option value="XL">XL</option>
             <option value="XXL">XXL</option>
-          </select>
-          </section> 
+            </select>
+          </fieldset>
+           
           <!--Submit button-->
-          <section class="form-group">
-            <button type="submit">Submit</button>
-          </section>
+          <fieldset>    
+            <label for = "submit"></label>
+            <select id="submit" name="submit">
+            <button type="submit">Submit Form </button>
+          </fieldset>
 
          <!-- 
  What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.

From 3202a19b5d12d9380b978c94d7f2fd9bcd249cd6 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 22:05:10 +0100
Subject: [PATCH 09/12]  removed the cosing tag from the input element of
 first-name, last-name, email and password

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f52cd87ee..9dcdcdcc4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,28 +17,28 @@ <h1>Product Pick</h1>
          <fieldset>
           <label for = "first-name">First Name</label>
           <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
-        aria-describedby="fnameHelp"</>
+        aria-describedby="fnameHelp">
           <small id="fnameHelp">Must be at least 2 characters long</small>
          </fieldset>
           <!-- Last name-->
           <fieldset>
           <label for = "last-name">Last Name</label>
           <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
-        aria-describedby="lnameHelp"</>
+        aria-describedby="lnameHelp">
           <small id="lnameHelp">Must be at least 2 characters long</small>
          </fieldset>
           <!-- Email-->
           <fieldset>
           <label for = "email">Email</label>
           <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-        aria-describedby="emailHelp"</>
+        aria-describedby="emailHelp">
           <small id="emailHelp">Must be a valid email address</small>
           </fieldset>
           <!-- Password-->
           <fieldset>
           <label for = "password">Password</label>
           <input type="password" id="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
-        aria-describedby="passwordHelp"</>
+        aria-describedby="passwordHelp">
           <small id="passwordHelp">Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character</small>
           </fieldset>
           <!--Shirt Color-->

From ec3f16de2c2df9fbaf5a3544b04b2bae24438a2b Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 22:21:12 +0100
Subject: [PATCH 10/12]  fix the submitt syntax with the right tags

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 9dcdcdcc4..0d64f45f4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -66,11 +66,9 @@ <h1>Product Pick</h1>
           </fieldset>
            
           <!--Submit button-->
-          <fieldset>    
-            <label for = "submit"></label>
-            <select id="submit" name="submit">
+          <fieldset>
             <button type="submit">Submit Form </button>
-          </fieldset>
+           </fieldset>
 
          <!-- 
  What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.

From 5e7ec287320d38521eed5acaec570a2b8dddf9c6 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 22:31:54 +0100
Subject: [PATCH 11/12] adding legend to the shirt color

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 0d64f45f4..77e555efe 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -43,6 +43,7 @@ <h1>Product Pick</h1>
           </fieldset>
           <!--Shirt Color-->
           <fieldset>
+            <legend>Shirt Color</legend>
           <label for = "shirt-color">Shirt Color</label>
           <select id="shirt-color" name="shirt-color" required>
             <option value="">Select a color</option>

From 919fac933ad2cae35f14fb27c214ca378e3312f8 Mon Sep 17 00:00:00 2001
From: Tobias <amaechinatobias@gmail.com>
Date: Wed, 20 May 2026 22:52:35 +0100
Subject: [PATCH 12/12]  adding CSS internal style at the head section for the
 HTml elements

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 77e555efe..443b70a1f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,6 +6,59 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+    body {
+      font-family: system-ui, sans-serif;
+      padding: 1rem;
+      line-height: 1.5;
+    } 
+    form {
+      max-width: 500px;
+      margin:  auto;
+    } 
+    fieldset {
+      border: none;
+      padding: 0;
+      margin: 1.5rem;
+    } 
+     label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+    } 
+     input, select button{
+      width: 100%;
+      padding:12px;
+      font-size: 1rem;
+      min-height: 48px;
+      box-sizing: border-box;
+    } 
+     small {
+      display: block;
+      margin-top: 0.25rem;
+      color: #666;
+    }
+     button {
+      padding: 0.75rem 1.5rem;
+      font-size: 1rem;
+      background-color: #007BFF;
+      color: white;
+      border: none;
+      cursor: pointer;
+    } 
+     button:hover {
+      background-color: #0056b3;
+    }
+     header, footer {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+     footer p {
+      font-size: 0.875rem;
+      color: #666;
+    }
+     
+    </style>
   </head>
   <body>
     <header>