From 11dc50d5a2f5eb11b34189c0e7d20a4a16c74fc3 Mon Sep 17 00:00:00 2001
From: TaliaKucuk <talia_k@live.co.uk>
Date: Mon, 11 May 2026 18:20:29 +0100
Subject: [PATCH 1/4] initial attempt

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..71b67d494 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,15 +13,27 @@ <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-->
+        <div><label for="name">Name:</label>
+        <input type="text" id="name" name="customers_name" required pattern=.*\S.*\S.*></div>
+        <!-- 1. What is the customer's name? I must collect this data and 
+           it contains at least two non-space characters. -->
+           <div><label for="mail">Email:</label>
+            <input type ="email" id="mail" name="customers_email" required></div>
+<!-- 2. What is the customer's email? I must make sure the email is valid.
+ Email addresses follow a consistent pattern.-->
+<div><label for="colour">Colour:</label><input id="colour" name="t-shirt colour" required></div>
+<!--3. What colour should this T-shirt be? I must provide 3 options. 
+How will I ensure they do not choose other colours?-->
+<div><label for="size">Size:</label><input id="size" name="t-shirt size" required></div>
+<!-- 4. What size does the customer want? I must provide the following 6 options:
+XS, S, M, L, XL, XXL-->
+<p class="button">
+  <button type="submit">Submit</button>
+</p>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      Talia Kucuk 
     </footer>
   </body>
 </html>

From c57579722e49c3609a9697bccdb34ff93146cec7 Mon Sep 17 00:00:00 2001
From: TaliaKucuk <talia_k@live.co.uk>
Date: Mon, 11 May 2026 18:21:37 +0100
Subject: [PATCH 2/4] changed colour input to be a dropdown menu

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 71b67d494..e2e56b0fc 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -21,7 +21,16 @@ <h1>Product Pick</h1>
             <input type ="email" id="mail" name="customers_email" required></div>
 <!-- 2. What is the customer's email? I must make sure the email is valid.
  Email addresses follow a consistent pattern.-->
-<div><label for="colour">Colour:</label><input id="colour" name="t-shirt colour" required></div>
+ <div>
+  <label for="colour">Colour:</label>
+
+  <select id="colour" name="tshirt_colour" required>
+    <option value="" selected disabled>Choose a colour</option>
+    <option value="pink">Pink</option>
+    <option value="yellow">Yellow</option>
+    <option value="black">Black</option>
+  </select>
+</div>
 <!--3. What colour should this T-shirt be? I must provide 3 options. 
 How will I ensure they do not choose other colours?-->
 <div><label for="size">Size:</label><input id="size" name="t-shirt size" required></div>

From bc3530bfe094f62aa0a3330679c00330d8f4a7b2 Mon Sep 17 00:00:00 2001
From: TaliaKucuk <talia_k@live.co.uk>
Date: Mon, 11 May 2026 18:28:01 +0100
Subject: [PATCH 3/4] added dropdown menu for tshirt size

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e2e56b0fc..958befdcc 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -33,7 +33,19 @@ <h1>Product Pick</h1>
 </div>
 <!--3. What colour should this T-shirt be? I must provide 3 options. 
 How will I ensure they do not choose other colours?-->
-<div><label for="size">Size:</label><input id="size" name="t-shirt size" required></div>
+<div>
+  <label for="size">Size:</label>
+
+  <select id="size" name="tshirt_size" required>
+    <option value="" selected disabled>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>
+</div>
 <!-- 4. What size does the customer want? I must provide the following 6 options:
 XS, S, M, L, XL, XXL-->
 <p class="button">

From e07dc56076c83a2426b71b1932435c5528d0103b Mon Sep 17 00:00:00 2001
From: TaliaKucuk <talia_k@live.co.uk>
Date: Wed, 13 May 2026 12:46:02 +0100
Subject: [PATCH 4/4] added style.css page and linked to index.html

---
 Form-Controls/index.html | 12 ++++++---
 Form-Controls/style.css  | 55 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 958befdcc..5c53db162 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,6 +6,8 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <header>
@@ -13,8 +15,10 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <div><label for="name">Name:</label>
-        <input type="text" id="name" name="customers_name" required pattern=.*\S.*\S.*></div>
+        <div>
+          <label for="name">Name:</label>
+        <input type="text" id="name" name="customers_name" required pattern=".*\S.*\S.*">
+      </div>
         <!-- 1. What is the customer's name? I must collect this data and 
            it contains at least two non-space characters. -->
            <div><label for="mail">Email:</label>
@@ -48,9 +52,9 @@ <h1>Product Pick</h1>
 </div>
 <!-- 4. What size does the customer want? I must provide the following 6 options:
 XS, S, M, L, XL, XXL-->
-<p class="button">
+<div class="button">
   <button type="submit">Submit</button>
-</p>
+</div>
       </form>
     </main>
     <footer>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..900f5a4f7
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,55 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+  }
+  
+  header,
+  footer {
+    text-align: center;
+    padding: 1rem;
+  }
+  
+  main {
+    display: flex;
+    justify-content: center;
+  }
+  
+  form {
+    background-color: white;
+    padding: 2rem;
+    margin-top: 2rem;
+    width: 320px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  form div {
+    margin-bottom: 1rem;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 0.4rem;
+    font-weight: bold;
+  }
+  
+  input,
+  select,
+  button {
+    width: 100%;
+    padding: 0.6rem;
+    box-sizing: border-box;
+  }
+  
+  button {
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #333;
+  }
\ No newline at end of file