From c7a30ee63e36f51048d544ddcbc7aaa6e8bb8c92 Mon Sep 17 00:00:00 2001
From: mrafeie <m.rafeie.mr@gmail.com>
Date: Sat, 9 May 2026 21:47:50 +0100
Subject: [PATCH 1/4] Add form elements for customer details and T-shirt
 options

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..71749b34e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,66 @@
       <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-->
-      </form>
+<form>
+  
+    <label for="name">Customer Name</label>
+    <input
+    type="text"
+    id="name"
+    name="name"
+    required
+    pattern=".*\S.*\S.*"
+    minlength="2"
+    />
+
+
+    <label for="email">Email Address</label>
+    <input
+    type="email"
+    id="email"
+    name="email"
+    required
+    /><br />
+
+      <!-- T-Shirt Colour -->
+    <fieldset>
+      <legend>T-Shirt Colour</legend>
+
+      <label>
+        <input type="radio" name="colour" value="Black" required />
+        Black
+      </label>
+
+      <label>
+        <input type="radio" name="colour" value="White" />
+        White
+      </label>
+
+      <label>
+        <input type="radio" name="colour" value="Blue" />
+        Blue
+      </label>
+    </fieldset>
+
+    <!-- T-Shirt Size -->
+    <label for="size">T-Shirt Size</label>
+
+    <select id="size" name="size">
+    <option value="">Please 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>
+
+
+  </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Mahdi Rafiei</p>
     </footer>
   </body>
 </html>

From 7e350d8d87e24a93d9869a7166d4a72dff982234 Mon Sep 17 00:00:00 2001
From: mrafeie <m.rafeie.mr@gmail.com>
Date: Fri, 15 May 2026 22:22:33 +0100
Subject: [PATCH 2/4] Review issues fixed

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 71749b34e..227f889c0 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,66 +12,47 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-<form>
-  
-    <label for="name">Customer Name</label>
-    <input
-    type="text"
-    id="name"
-    name="name"
-    required
-    pattern=".*\S.*\S.*"
-    minlength="2"
-    />
-
-
-    <label for="email">Email Address</label>
-    <input
-    type="email"
-    id="email"
-    name="email"
-    required
-    /><br />
-
-      <!-- T-Shirt Colour -->
-    <fieldset>
-      <legend>T-Shirt Colour</legend>
-
-      <label>
-        <input type="radio" name="colour" value="Black" required />
-        Black
-      </label>
-
-      <label>
-        <input type="radio" name="colour" value="White" />
-        White
-      </label>
-
-      <label>
-        <input type="radio" name="colour" value="Blue" />
-        Blue
-      </label>
-    </fieldset>
-
-    <!-- T-Shirt Size -->
-    <label for="size">T-Shirt Size</label>
-
-    <select id="size" name="size">
-    <option value="">Please 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>
-
-
-  </form>
+      <form>
+
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" minlength="2" required ><br>
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email"><br><br>
+
+        <fieldset>
+          <legend>colour:</legend>
+
+          <label>
+              <input type="radio" id="colour-red" name="colour" value="red" required>
+              Red
+          </label>
+          
+          <label >
+              <input type="radio" id="colour-blue" name="colour" value="blue">
+              Blue
+          </label>
+          
+          <label >
+              <input type="radio" id="colour-green" name="colour" value="green">
+              Green
+          </label>
+        
+        </fieldset>
+
+        <p for="size">Choose your size</p>
+
+        <select id="size" name="size" required>
+            <option value="s">Small</option>
+            <option value="m">Medium</option>
+            <option value="l">Large</option>
+            <option value="xl">XLarge</option>
+            <option value="xl">XXLarge</option>
+
+        </select> 
+      </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>Mahdi Rafiei</p>
+      <p>Anita Amirhaeri</p>
     </footer>
   </body>
 </html>

From 3f3dd7bc1b824cd5426709ca31c494e16d0a4b85 Mon Sep 17 00:00:00 2001
From: mrafeie <m.rafeie.mr@gmail.com>
Date: Tue, 26 May 2026 16:53:20 +0100
Subject: [PATCH 3/4] fixed issues - button added

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 227f889c0..9162cba6a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,58 +1,84 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="" />
+    <title>T-shirt Order Form</title>
+    <meta
+      name="description"
+      content="T-shirt order form for customers to place orders"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
     <main>
-      <form>
+      <form method="get" class="container">
+        <!-- Requirements:
+      - 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 and to 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 and to ensure they do not choose other sizes.
+      -->
+        <header>
+          <h1>T-shirt Order Form</h1>
+        </header>
 
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="name" minlength="2" required ><br>
-        <label for="email">Email:</label>
-        <input type="email" id="email" name="email"><br><br>
+        <hr />
+        <label for="name">Full Name</label>
+        <input
+          id="name"
+          name="name"
+          type="text"
+          minlength="2"
+          placeholder="First Name Surname"
+          pattern="[\p{L} ]{2,}"
+          required
+        />
 
-        <fieldset>
-          <legend>colour:</legend>
+        <hr />
+        <label for="email">Email</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$"
+          placeholder="Your email"
+          required
+        />
 
-          <label>
-              <input type="radio" id="colour-red" name="colour" value="red" required>
-              Red
-          </label>
-          
-          <label >
-              <input type="radio" id="colour-blue" name="colour" value="blue">
-              Blue
-          </label>
-          
-          <label >
-              <input type="radio" id="colour-green" name="colour" value="green">
-              Green
-          </label>
-        
-        </fieldset>
+        <hr />
+        <label for="colour">T-shirt Colour:</label>
+        <select name="colour" id="colour" required>
+          <option value="">Choose a Colour</option>
+          <option value="Red">Red</option>
+          <option value="Blue">Blue</option>
+          <option value="Yellow">Yellow</option>
+        </select>
 
-        <p for="size">Choose your size</p>
+        <hr />
+        <label for="Size">T-shirt Size:</label>
+        <select name="size" id="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>
 
-        <select id="size" name="size" required>
-            <option value="s">Small</option>
-            <option value="m">Medium</option>
-            <option value="l">Large</option>
-            <option value="xl">XLarge</option>
-            <option value="xl">XXLarge</option>
+        <hr />
+        <button type="submit">Submit</button>
 
-        </select> 
+        <!-- 
+          try writing out the requirements first as comments
+        this will also help you fill in your PR message later-->
       </form>
     </main>
     <footer>
-      <p>Anita Amirhaeri</p>
+      <!-- change to your name-->
+      <p>Mahdi Rafiei</p>
     </footer>
   </body>
 </html>

From 507e038538392cee9a29b26e8dc06dcccb565681 Mon Sep 17 00:00:00 2001
From: mrafeie <m.rafeie.mr@gmail.com>
Date: Wed, 27 May 2026 10:35:32 +0100
Subject: [PATCH 4/4] error fixed - Added quantity input to T-shirt order form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 9162cba6a..cf2c4d1f6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -9,7 +9,6 @@
       content="T-shirt order form for customers to place orders"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <main>
@@ -19,6 +18,7 @@
       - 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 and to 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 and to ensure they do not choose other sizes.
+      - How many does the customer want? I must collect a number for quantity of t-shirts and ensure the number is between 1 and 100.
       -->
         <header>
           <h1>T-shirt Order Form</h1>
@@ -31,7 +31,7 @@ <h1>T-shirt Order Form</h1>
           name="name"
           type="text"
           minlength="2"
-          placeholder="First Name Surname"
+          placeholder="FirstName Surname"
           pattern="[\p{L} ]{2,}"
           required
         />
@@ -66,7 +66,19 @@ <h1>T-shirt Order Form</h1>
           <option value="L">L</option>
           <option value="XL">XL</option>
           <option value="XXL">XXL</option>
-        </select>
+        </select>        
+        <hr />
+
+        <label for="quantity">Quantity:</label>
+        <input
+          id="quantity"
+          name="quantity"
+          type="number"
+          min="1"
+          max="100"
+          value="1"
+          required
+        />
 
         <hr />
         <button type="submit">Submit</button>