From ab59fcbf0cd49b261385c4281cb2441437d2c395 Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Mon, 8 Jun 2026 15:08:25 +0100
Subject: [PATCH 1/6] Implement customer name and email input fields

Added form fields for customer name and email with validation requirements.
---
 Form-Controls/index.html | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..12e2a0475 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,10 +13,33 @@ <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 the customer's name. Name contain at least 2 non-space characters. -->
+      <label for="name">Customer Name:</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          pattern=".*\S{2,}.*"
+          required
+        />
+  <!-- Collect the customer's email address. Email must be in a valid email format. -->
+       <label for="email">Email Address:</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+        />
+  <!-- Allow the customer to choose a T-shirt colour -->
+
+  <!-- Only provide 3 colour options -->
+
+  <!-- Allow the customer to choose a T-shirt size -->
+
+  <!-- Provide sizes: XS, S, M, L, XL, XXL -->
+
+  <!-- All fields must be required -->
+
       </form>
     </main>
     <footer>

From 68f1c61cf6eeca613a62468c4486b9b0d88e65c4 Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Mon, 8 Jun 2026 16:11:36 +0100
Subject: [PATCH 2/6] Update comments and add T-shirt colour options

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 12e2a0475..8584cafe4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -30,10 +30,20 @@ <h1>Product Pick</h1>
           name="email"
           required
         />
-  <!-- Allow the customer to choose a T-shirt colour -->
+  <!-- Allow the customer to choose a T-shirt colour. Only provide three colour options.  -->
+      <fieldset>
+        <legend>Choose a Colour</legend>
 
-  <!-- Only provide 3 colour options -->
+        <input type="radio" id="red" name="colour" value="red" required>
+        <label for="red">Red</label>
 
+        <input type="radio" id="blue" name="colour" value="blue">
+        <label for="blue">Blue</label>
+
+        <input type="radio" id="green" name="colour" value="green">
+        <label for="green">Green</label>
+      </fieldset>
+  
   <!-- Allow the customer to choose a T-shirt size -->
 
   <!-- Provide sizes: XS, S, M, L, XL, XXL -->

From 8fb3ab3afb16de186e051dd90660001c43c6e624 Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Mon, 8 Jun 2026 16:26:08 +0100
Subject: [PATCH 3/6] Enhance T-shirt size selection and update footer

Updated T-shirt size selection options and footer name.
---
 Form-Controls/index.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 8584cafe4..5a1ea3ea4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -44,17 +44,25 @@ <h1>Product Pick</h1>
         <label for="green">Green</label>
       </fieldset>
   
-  <!-- Allow the customer to choose a T-shirt size -->
+  <!-- Allow the customer to choose a T-shirt size. Provide sizes: XS, S, M, L, XL, XXL -->
 
-  <!-- Provide sizes: XS, S, M, L, XL, XXL -->
-
-  <!-- All fields must be required -->
+        <label for="size">T-shirt Size:</label>
+          <select id="size" name="size" required>
+            <option value="">Choose 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>
+        
+        <button type="submit">Submit Order</button>
 
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Khaliun Baatarkhuu</p>
     </footer>
   </body>
 </html>

From 76ba171aa2211308a06c751e7f66aa5f8f32210f Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Mon, 8 Jun 2026 16:38:32 +0100
Subject: [PATCH 4/6] Add styles for form controls in index.html

Added CSS styles for form layout and elements.
---
 Form-Controls/index.html | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 5a1ea3ea4..57bf39ec5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,7 +6,43 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+   
+    <style>
+      body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      }
+
+      form {
+        max-width: 400px;
+      }
+  
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
+  
+      input[type="text"],
+      input[type="email"],
+      select {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 15px;
+        box-sizing: border-box;
+      }
+  
+      fieldset {
+        margin-bottom: 15px;
+      }
+  
+      button {
+        padding: 10px 20px;
+      }
+    </style>
   </head>
+  
+  
   <body>
     <header>
       <h1>Product Pick</h1>

From 208a3d6e71334fe7d793cdff403a15c744f81bdf Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Mon, 8 Jun 2026 20:57:52 +0100
Subject: [PATCH 5/6] Indented certain lines of code for cleaner formatting

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 57bf39ec5..9feebaac7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -47,26 +47,29 @@
     <header>
       <h1>Product Pick</h1>
     </header>
+    
     <main>
       <form>
-         <!-- Collect the customer's name. Name contain at least 2 non-space characters. -->
-      <label for="name">Customer Name:</label>
+           <!-- Collect the customer's name. Name contain at least 2 non-space characters. -->
+        <label for="name">Customer Name:</label>
         <input
-          type="text"
-          id="name"
-          name="name"
-          pattern=".*\S{2,}.*"
-          required
-        />
-  <!-- Collect the customer's email address. Email must be in a valid email format. -->
+            type="text"
+            id="name"
+            name="name"
+            pattern=".*\S{2,}.*"
+            required
+          />
+          
+           <!-- Collect the customer's email address. Email must be in a valid email format. -->
        <label for="email">Email Address:</label>
-        <input
+       <input
           type="email"
           id="email"
           name="email"
           required
         />
-  <!-- Allow the customer to choose a T-shirt colour. Only provide three colour options.  -->
+        
+           <!-- Allow the customer to choose a T-shirt colour. Only provide three colour options.  -->
       <fieldset>
         <legend>Choose a Colour</legend>
 
@@ -80,7 +83,7 @@ <h1>Product Pick</h1>
         <label for="green">Green</label>
       </fieldset>
   
-  <!-- Allow the customer to choose a T-shirt size. Provide sizes: XS, S, M, L, XL, XXL -->
+           <!-- Allow the customer to choose a T-shirt size. Provide sizes: XS, S, M, L, XL, XXL -->
 
         <label for="size">T-shirt Size:</label>
           <select id="size" name="size" required>
@@ -97,6 +100,7 @@ <h1>Product Pick</h1>
 
       </form>
     </main>
+    
     <footer>
       <p>By Khaliun Baatarkhuu</p>
     </footer>

From 141e0bc2f8ffba0d415a3ed2761ec0903ea895e4 Mon Sep 17 00:00:00 2001
From: Khaliun Baatarkhuu <khaliun13@hotmail.com>
Date: Tue, 9 Jun 2026 08:10:29 +0100
Subject: [PATCH 6/6] Update name input pattern for validation

- Added "title" attribute to make it clearer for the user.

- Changed  "pattern=".*\S{2,}.*" to "pattern=".*\S.*\S.*", because the former might not accept C J due to it being non consecutive.
---
 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 9feebaac7..84c49d4fc 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -56,7 +56,8 @@ <h1>Product Pick</h1>
             type="text"
             id="name"
             name="name"
-            pattern=".*\S{2,}.*"
+            pattern=".*\S.*\S.*"
+            title="Name must contain at least 2 non-space characters."
             required
           />