From e322c83a50c13ac2738450732f27c76bb1f82d97 Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Mon, 2 Feb 2026 12:32:57 +0000
Subject: [PATCH 1/5] Enhance form to collect user details including name,
 email, color, and size selections

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..aa7405ca8 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,64 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form>
-        <!-- write your html here-->
+        <form>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required
+         minlength="2" pattern="^[A-Za-z ]{2,}$"
+         title="Name must be at least 2 letters and contain only letters"
+         />
+        <br /><br />
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" placeholder="name@example.com" required />
+        <br /><br />
+        <fieldset>
+          <legend>Please select a color:</legend>
+          <input type="radio" id="black" name="color" value="black" />
+          <label for="black">black</label>
+          <br />
+          <br />
+          <input type="radio" id="blue" name="color" value="blue" />
+          <label for="blue">blue</label>
+          <br />
+          <br />
+          <input type="radio" id="red" name="color" value="red" />
+          <label for="red">red</label>
+          <br />
+          <br />
+        </fieldset>
+        <br /> <br />
+        <label for="size">Please select a size:</label>
+        <select id="size" name="size" required>
+          <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>
+        <br /><br />
+        <button type="submit">Submit</button>
+      </form>
+
+      
+
         <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+          We are selling t-shirts. Write a form to collect the following data:
+
+Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size.
+
+Writing that out as a series of questions to ask yourself:
+
+What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
+What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
+All fields are required. Do not write a form action for this project.-->
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>Oussama Mouggal</h2>
     </footer>
   </body>
 </html>

From b5ae6e60a14bb84725a0d2fed917e21cccc2d945 Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Tue, 3 Feb 2026 16:09:27 +0000
Subject: [PATCH 2/5] i deleted the comment/exercise instructions

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index aa7405ca8..49582462d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -50,22 +50,6 @@ <h1>Product Pick</h1>
         <br /><br />
         <button type="submit">Submit</button>
       </form>
-
-      
-
-        <!-- 
-          We are selling t-shirts. Write a form to collect the following data:
-
-Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size.
-
-Writing that out as a series of questions to ask yourself:
-
-What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
-What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
-What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
-What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
-All fields are required. Do not write a form action for this project.-->
-      </form>
     </main>
     <footer>
       <!-- change to your name-->

From e84b92531f9e4679f0eb746c9f9e75b6c309edc2 Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Tue, 3 Feb 2026 16:13:39 +0000
Subject: [PATCH 3/5] Change footer element from h2 to p

---
 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 49582462d..2bc4e9a1b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -53,7 +53,7 @@ <h1>Product Pick</h1>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>Oussama Mouggal</h2>
+      <p>Oussama Mouggal</p>
     </footer>
   </body>
 </html>

From 97856f52535bfc10fe73437f9b514137bca9a6f9 Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Tue, 3 Feb 2026 16:25:00 +0000
Subject: [PATCH 4/5] Add 'required' attribute to color radio buttons for form
 validation

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2bc4e9a1b..76a9a9725 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -24,15 +24,15 @@ <h1>Product Pick</h1>
         <br /><br />
         <fieldset>
           <legend>Please select a color:</legend>
-          <input type="radio" id="black" name="color" value="black" />
+          <input type="radio" id="black" name="color" value="black" required />
           <label for="black">black</label>
           <br />
           <br />
-          <input type="radio" id="blue" name="color" value="blue" />
+          <input type="radio" id="blue" name="color" value="blue" required />
           <label for="blue">blue</label>
           <br />
           <br />
-          <input type="radio" id="red" name="color" value="red" />
+          <input type="radio" id="red" name="color" value="red" required />
           <label for="red">red</label>
           <br />
           <br />

From d7037140700a17b72a5ac9e86a254374ace37fe1 Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Tue, 3 Feb 2026 16:32:27 +0000
Subject: [PATCH 5/5] I disabled default option in the size selection

---
 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 76a9a9725..24037f198 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -40,6 +40,7 @@ <h1>Product Pick</h1>
         <br /> <br />
         <label for="size">Please select a size:</label>
         <select id="size" name="size" required>
+          <option value="" disabled selected>Select a size</option>
           <option value="XS">XS</option>
           <option value="S">S</option>
           <option value="M">M</option>
@@ -52,7 +53,6 @@ <h1>Product Pick</h1>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
       <p>Oussama Mouggal</p>
     </footer>
   </body>