From 24e86aab04ad6d62573a5c87119d6496c83094a2 Mon Sep 17 00:00:00 2001
From: khalil-ali1 <khalil.ali.uk1@gmail.com>
Date: Tue, 11 Feb 2025 10:48:43 +0000
Subject: [PATCH 1/2] finish the form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cd..93994a61 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,11 +17,80 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+        <!-- 
+        1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+        2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+        3. What color should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colors?
+        4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
+        -->
+        <fieldset>
+          <legend>Customer Details:</legend>
+  
+          <label for="name">Name:</label>
+          <input
+                 type="text"
+                 id="name"
+                 name="name"
+                 minlength="2"
+                 placeholder="More than two letters,please"
+                 required />
+          <br />
+          <br />
+          <label for="email">Email:</label>
+          <input
+                 type="email"
+                 id="email"
+                 name="email"
+                 autocomplete="on"
+                 placeholder="Example@gmail.com"
+                 required />
+        </fieldset>
+  
+        <fieldset>
+          <legend>Color:</legend>
+          <input 
+                  type="radio" 
+                  id="red" 
+                  name="color" 
+                  value="red" 
+                  required/>
+          <label for="red">Red</label>
+  
+          <input 
+                  type="radio" 
+                  id="green" 
+                  name="color" 
+                  value="green" />
+          <label for="green">Green</label>
+  
+          <input 
+                  type="radio" 
+                  id="blue" 
+                  name="color" 
+                  value="blue" />
+          <label for="blue">Blue</label>
+        </fieldset>
+  
+        <fieldset>
+          <legend>Size:</legend>
+          <label for="size">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>
+        </fieldset>
+        <br />
+        <input type="button" value="Submit" />
+        <input type="button" value="Reset" />
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Khalil Ali</h2>
     </footer>
   </body>
 </html>

From 5b3398d581e7d51d8e4441d9d9caf8f553d6ffb5 Mon Sep 17 00:00:00 2001
From: khalil-ali1 <khalil.ali.uk1@gmail.com>
Date: Fri, 14 Feb 2025 07:50:26 +0000
Subject: [PATCH 2/2] interact with the first review,and fix notices

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 93994a61..eeeb9753 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -23,6 +23,8 @@ <h1>Product Pick</h1>
         3. What color should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colors?
         4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
         -->
+
+        <!-- pattern="^[a-zA-Z\s\-']{2,}$"This is a regular expression that checks for a minimum of two letters, and allows for spaces, hyphens, and apostrophes-->
         <fieldset>
           <legend>Customer Details:</legend>
   
@@ -31,7 +33,7 @@ <h1>Product Pick</h1>
                  type="text"
                  id="name"
                  name="name"
-                 minlength="2"
+                 pattern="^[a-zA-Z\s\-']{2,}$"
                  placeholder="More than two letters,please"
                  required />
           <br />
@@ -84,8 +86,8 @@ <h1>Product Pick</h1>
           </select>
         </fieldset>
         <br />
-        <input type="button" value="Submit" />
-        <input type="button" value="Reset" />
+        <input type="Submit" value="Submit" />
+        <input type="Reset" value="Reset" />
       </form>
     </main>
     <footer>