From 77123add04eb1676ededde06f8fb74a93f433c55 Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Wed, 28 May 2025 23:44:27 +0200
Subject: [PATCH 1/6] Basic wireframe for form created

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cd..e2b65007 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,10 +13,36 @@ <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-->
+        <!-- Name -->
+        <div>
+          <label for="">Name</label>
+          <input type="text" />
+        </div>
+
+        <!-- email -->
+        <div>
+          <label for="">E-mail</label>
+          <input type="text" />
+        </div>
+
+        <!-- colour 3 options -->
+        <div>
+          <label for="">Colour</label>
+          <input type="text" />
+        </div>
+
+        <!-- size 6 options -->
+        <div>
+          <label for="">Size</label>
+          <select name="" id="">
+            <option value=""></option>
+            <option value=""></option>
+            <option value=""></option>
+            <option value=""></option>
+            <option value=""></option>
+            <option value=""></option>
+          </select>
+        </div>
       </form>
     </main>
     <footer>

From 524292f3977335b6eaaa8ee2b277e1d1935db0c3 Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Thu, 29 May 2025 00:27:30 +0200
Subject: [PATCH 2/6] Layout and validation completed

---
 Form-Controls/index.html | 75 ++++++++++++++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 14 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e2b65007..20e8fd98 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -15,34 +15,81 @@ <h1>Product Pick</h1>
       <form>
         <!-- Name -->
         <div>
-          <label for="">Name</label>
-          <input type="text" />
+          <label for="name">Name</label>
+          <input
+            type="text"
+            id="name"
+            placeholder="Your Name"
+            minlength="2"
+            required
+          />
         </div>
+        <br />
 
         <!-- email -->
         <div>
-          <label for="">E-mail</label>
-          <input type="text" />
+          <label for="email">E-mail</label>
+          <input
+            type="email"
+            id="email"
+            placeholder="name@email.com"
+            required
+          />
         </div>
+        br
 
         <!-- colour 3 options -->
         <div>
-          <label for="">Colour</label>
-          <input type="text" />
+          <fieldset>
+            <legend>Color</legend>
+
+            <label for="white"
+              ><input
+                type="radio"
+                name="color"
+                id="white"
+                value="white"
+                required
+              />White</label
+            >
+            <label for="grey"
+              ><input
+                type="radio"
+                name="color"
+                id="grey"
+                value="grey"
+              />Grey</label
+            >
+            <label for="black"
+              ><input
+                type="radio"
+                name="color"
+                id="black"
+                value="black"
+              />Black</label
+            >
+          </fieldset>
         </div>
 
+        <br />
+
         <!-- size 6 options -->
         <div>
-          <label for="">Size</label>
-          <select name="" id="">
-            <option value=""></option>
-            <option value=""></option>
-            <option value=""></option>
-            <option value=""></option>
-            <option value=""></option>
-            <option value=""></option>
+          <label for="size">Size</label>
+          <select name="size" id="size" required>
+            <option value="">- Select -</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>
         </div>
+        <br />
+
+        <!-- Submit button -->
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>

From e44c42845fca826a59675a539d5033b966f95eaf Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Thu, 29 May 2025 00:34:46 +0200
Subject: [PATCH 3/6] Fieldset created for customer details and order details

---
 Form-Controls/index.html | 142 +++++++++++++++++++++------------------
 1 file changed, 75 insertions(+), 67 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 20e8fd98..7447e993 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,79 +13,87 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- Name -->
-        <div>
-          <label for="name">Name</label>
-          <input
-            type="text"
-            id="name"
-            placeholder="Your Name"
-            minlength="2"
-            required
-          />
-        </div>
+        <fieldset>
+          <legend>Customer Details</legend>
+          <!-- Name -->
+          <div>
+            <label for="name">Name</label>
+            <input
+              type="text"
+              id="name"
+              placeholder="Your Name"
+              minlength="2"
+              required
+            />
+          </div>
+          <br />
+
+          <!-- email -->
+          <div>
+            <label for="email">E-mail</label>
+            <input
+              type="email"
+              id="email"
+              placeholder="name@email.com"
+              required
+            />
+          </div>
+        </fieldset>
+
         <br />
 
-        <!-- email -->
-        <div>
-          <label for="email">E-mail</label>
-          <input
-            type="email"
-            id="email"
-            placeholder="name@email.com"
-            required
-          />
-        </div>
-        br
+        <fieldset>
+          <legend>Order Details</legend>
+          <!-- colour 3 options -->
+          <div>
+            <fieldset>
+              <legend>Color</legend>
 
-        <!-- colour 3 options -->
-        <div>
-          <fieldset>
-            <legend>Color</legend>
+              <label for="white"
+                ><input
+                  type="radio"
+                  name="color"
+                  id="white"
+                  value="white"
+                  required
+                />White</label
+              >
+              <label for="grey"
+                ><input
+                  type="radio"
+                  name="color"
+                  id="grey"
+                  value="grey"
+                />Grey</label
+              >
+              <label for="black"
+                ><input
+                  type="radio"
+                  name="color"
+                  id="black"
+                  value="black"
+                />Black</label
+              >
+            </fieldset>
+          </div>
 
-            <label for="white"
-              ><input
-                type="radio"
-                name="color"
-                id="white"
-                value="white"
-                required
-              />White</label
-            >
-            <label for="grey"
-              ><input
-                type="radio"
-                name="color"
-                id="grey"
-                value="grey"
-              />Grey</label
-            >
-            <label for="black"
-              ><input
-                type="radio"
-                name="color"
-                id="black"
-                value="black"
-              />Black</label
-            >
-          </fieldset>
-        </div>
+          <br />
 
-        <br />
+          <!-- size 6 options -->
+          <div>
+            <label for="size">Size</label>
+            <select name="size" id="size" required>
+              <option value="">- Select -</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>
+          </div>
+        </fieldset>
 
-        <!-- size 6 options -->
-        <div>
-          <label for="size">Size</label>
-          <select name="size" id="size" required>
-            <option value="">- Select -</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>
-        </div>
         <br />
 
         <!-- Submit button -->

From 1832bd64c3dd9cc0ec498c528517772ba48f29b1 Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Thu, 29 May 2025 00:58:42 +0200
Subject: [PATCH 4/6] Improved spacing on form

---
 Form-Controls/index.html | 62 +++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7447e993..349238b7 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="Order form for Product Pick" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
@@ -12,15 +12,19 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form>
+      <form action="#" method="post">
         <fieldset>
-          <legend>Customer Details</legend>
+          <legend>
+            <h2>Customer Details</h2>
+          </legend>
+
           <!-- Name -->
           <div>
-            <label for="name">Name</label>
+            <label for="name">Name:</label><br />
             <input
               type="text"
               id="name"
+              name="name"
               placeholder="Your Name"
               minlength="2"
               required
@@ -30,10 +34,11 @@ <h1>Product Pick</h1>
 
           <!-- email -->
           <div>
-            <label for="email">E-mail</label>
+            <label for="email">E-mail:</label><br />
             <input
               type="email"
               id="email"
+              name="email"
               placeholder="name@email.com"
               required
             />
@@ -43,37 +48,34 @@ <h1>Product Pick</h1>
         <br />
 
         <fieldset>
-          <legend>Order Details</legend>
+          <legend>
+            <h2>Order Details</h2>
+          </legend>
           <!-- colour 3 options -->
           <div>
             <fieldset>
-              <legend>Color</legend>
+              <legend>Color:</legend>
 
-              <label for="white"
-                ><input
+              <label for="white">
+                <input
                   type="radio"
                   name="color"
                   id="white"
                   value="white"
                   required
-                />White</label
-              >
-              <label for="grey"
-                ><input
-                  type="radio"
-                  name="color"
-                  id="grey"
-                  value="grey"
-                />Grey</label
-              >
-              <label for="black"
-                ><input
-                  type="radio"
-                  name="color"
-                  id="black"
-                  value="black"
-                />Black</label
-              >
+                />
+                White </label
+              ><br />
+
+              <label for="grey">
+                <input type="radio" name="color" id="grey" value="grey" />
+                Grey </label
+              ><br />
+
+              <label for="black">
+                <input type="radio" name="color" id="black" value="black" />
+                Black
+              </label>
             </fieldset>
           </div>
 
@@ -81,7 +83,7 @@ <h1>Product Pick</h1>
 
           <!-- size 6 options -->
           <div>
-            <label for="size">Size</label>
+            <label for="size">Size:</label><br />
             <select name="size" id="size" required>
               <option value="">- Select -</option>
               <option value="xs">XS</option>
@@ -97,12 +99,12 @@ <h1>Product Pick</h1>
         <br />
 
         <!-- Submit button -->
-        <button type="submit">Submit</button>
+        <button type="submit">Order</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Rashaad Ebrahim</h2>
     </footer>
   </body>
 </html>

From 2f5f9a4932fd07b510b432d8e3187f48f8032045 Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Thu, 29 May 2025 01:13:32 +0200
Subject: [PATCH 5/6] Minor changes made for Lighthouse

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 349238b7..ca32ee0a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -20,7 +20,9 @@ <h2>Customer Details</h2>
 
           <!-- Name -->
           <div>
-            <label for="name">Name:</label><br />
+            <p>
+              <label for="name">Name:</label>
+            </p>
             <input
               type="text"
               id="name"
@@ -34,7 +36,9 @@ <h2>Customer Details</h2>
 
           <!-- email -->
           <div>
-            <label for="email">E-mail:</label><br />
+            <p>
+              <label for="email">E-mail:</label>
+            </p>
             <input
               type="email"
               id="email"
@@ -53,37 +57,37 @@ <h2>Order Details</h2>
           </legend>
           <!-- colour 3 options -->
           <div>
-            <fieldset>
-              <legend>Color:</legend>
+            <p>Color:</p>
 
-              <label for="white">
-                <input
-                  type="radio"
-                  name="color"
-                  id="white"
-                  value="white"
-                  required
-                />
-                White </label
-              ><br />
+            <label for="white">
+              <input
+                type="radio"
+                name="color"
+                id="white"
+                value="white"
+                required
+              />
+              White
+            </label>
 
-              <label for="grey">
-                <input type="radio" name="color" id="grey" value="grey" />
-                Grey </label
-              ><br />
+            <label for="grey">
+              <input type="radio" name="color" id="grey" value="grey" />
+              Grey
+            </label>
 
-              <label for="black">
-                <input type="radio" name="color" id="black" value="black" />
-                Black
-              </label>
-            </fieldset>
+            <label for="black">
+              <input type="radio" name="color" id="black" value="black" />
+              Black
+            </label>
           </div>
 
           <br />
 
           <!-- size 6 options -->
           <div>
-            <label for="size">Size:</label><br />
+            <p>
+              <label for="size">Size:</label><br />
+            </p>
             <select name="size" id="size" required>
               <option value="">- Select -</option>
               <option value="xs">XS</option>

From b18e8151c802b4c1077828934ac5dd0db5da2a06 Mon Sep 17 00:00:00 2001
From: Rashaad Ebrahim <rmebrahim@gmail.com>
Date: Thu, 29 May 2025 01:22:24 +0200
Subject: [PATCH 6/6] Action removed from form tag

---
 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 ca32ee0a..3d71125d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,7 +12,7 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form action="#" method="post">
+      <form>
         <fieldset>
           <legend>
             <h2>Customer Details</h2>