From e2e61e3d4fdc1a96631ca82b1db72b96c45801c2 Mon Sep 17 00:00:00 2001
From: Mahir Shah <mahir.shah@hotmail.com>
Date: Wed, 9 Sep 2026 18:10:23 +0100
Subject: [PATCH 1/4] Add basic input fields for name, email, shirt colour and
 size in index.html

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..004f7056d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,15 +13,49 @@ <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-->
+          collect name, email, tshirt colour, tshirt size-->
+          <!--Validation: 
+                      name at least two non space characters
+                      Email valid format, follow expected pattern
+                      colour - 3 options
+                      size - 6 options, XS, S, M, L, XL, XXL-->
+        <div>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required>
+        </div>
+        <br>
+        <div>
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+        <br>
+        <div>
+          <label for="colour">Colour</label>
+          <select name="colour" id="colour" required>
+            <option value="">Please select</option>
+            <option value="white">White</option>
+            <option value="black">Black</option>
+            <option value="green">Green</option>
+          </select>
+        </div>
+        <br>
+        <div>
+          <label for="size">Size</label>
+          <select name="size" id="size" required>
+            <option value="">Please select</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>
+        </div>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Mahir Shah</p>
     </footer>
   </body>
 </html>

From e79de372b1f5fa9f4f8ad9ba7cd9bc18e9e36794 Mon Sep 17 00:00:00 2001
From: Mahir Shah <mahir.shah@hotmail.com>
Date: Thu, 10 Sep 2026 17:01:03 +0100
Subject: [PATCH 2/4] Add validation to name

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 004f7056d..a76de09e7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -22,7 +22,8 @@ <h1>Product Pick</h1>
                       size - 6 options, XS, S, M, L, XL, XXL-->
         <div>
           <label for="name">Name:</label>
-          <input type="text" id="name" name="name" required>
+          <input type="text" id="name" name="name" required minlength="2" 
+           pattern="(\p{L}\p{M}*)+(['\- ](\p{L}\p{M}*)+)*">
         </div>
         <br>
         <div>

From 7c61a35d666d2ff3dd15d3a81299c8cf5fbdc547 Mon Sep 17 00:00:00 2001
From: Mahir Shah <mahir.shah@hotmail.com>
Date: Thu, 10 Sep 2026 17:10:24 +0100
Subject: [PATCH 3/4] Add placeholder to email input

---
 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 a76de09e7..56957049c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -28,7 +28,7 @@ <h1>Product Pick</h1>
         <br>
         <div>
           <label for="email">Email:</label>
-          <input type="email" id="email" name="email" required>
+          <input type="email" id="email" name="email" required placeholder="abc@example.com">
         </div>
         <br>
         <div>

From 7803f175a04676f81f70cf01b48fbde89c0d07ce Mon Sep 17 00:00:00 2001
From: Mahir Shah <mahir.shah@hotmail.com>
Date: Thu, 10 Sep 2026 17:38:18 +0100
Subject: [PATCH 4/4] Remove uneeded comment. Format with Prettier. Add comment
 explaining regex

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 56957049c..9a82e4130 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,24 +13,34 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- 
-          collect name, email, tshirt colour, tshirt size-->
-          <!--Validation: 
-                      name at least two non space characters
-                      Email valid format, follow expected pattern
-                      colour - 3 options
-                      size - 6 options, XS, S, M, L, XL, XXL-->
         <div>
           <label for="name">Name:</label>
-          <input type="text" id="name" name="name" required minlength="2" 
-           pattern="(\p{L}\p{M}*)+(['\- ](\p{L}\p{M}*)+)*">
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            minlength="2"
+            pattern="(\p{L}\p{M}*)+(['\- ](\p{L}\p{M}*)+)*"
+          />
+          <!--Regex. \p{L} Any unicode 
+              character considered a letter. \p{M}*  0 or more unicode character that 
+              could have accent. ()+ 1 or more of all of that. 
+              ['\- ]  1 space ' - character. (\p{L}\p{M}*)+)* then 
+              0 or more of any letter again -->
         </div>
-        <br>
+        <br />
         <div>
           <label for="email">Email:</label>
-          <input type="email" id="email" name="email" required placeholder="abc@example.com">
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            placeholder="abc@example.com"
+          />
         </div>
-        <br>
+        <br />
         <div>
           <label for="colour">Colour</label>
           <select name="colour" id="colour" required>
@@ -40,7 +50,7 @@ <h1>Product Pick</h1>
             <option value="green">Green</option>
           </select>
         </div>
-        <br>
+        <br />
         <div>
           <label for="size">Size</label>
           <select name="size" id="size" required>