From 8cf2b116050a04dbf4b80343bc63eef1225ecf67 Mon Sep 17 00:00:00 2001
From: Mahmoud <obscureman999@gmail.com>
Date: Sun, 1 Feb 2026 13:05:16 +0000
Subject: [PATCH 1/2] Add accessible T-shirt order form with HTML validation

---
 Form-Controls/index.html | 70 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 8 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..aa18d1335 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,10 +1,10 @@
-<!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="" />
+    <meta name="description" content="Form controls project for CYF" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
@@ -13,15 +13,69 @@ <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="customerName">Customer name</label>
+          <input
+            id="customerName"
+            name="customerName"
+            type="text"
+            required
+            minlength="2"
+            autocomplete="name"
+          />
+        </div>
+
+        <div>
+          <label for="customerEmail">Customer email</label>
+          <input
+            id="customerEmail"
+            name="customerEmail"
+            type="email"
+            required
+            autocomplete="email"
+          />
+        </div>
+
+        <fieldset>
+          <legend>T-shirt colour</legend>
+          <div>
+            <input
+              id="colourBlack"
+              name="colour"
+              type="radio"
+              value="black"
+              required
+            />
+            <label for="colourBlack">Black</label>
+          </div>
+          <div>
+            <input id="colourWhite" name="colour" type="radio" value="white" />
+            <label for="colourWhite">White</label>
+          </div>
+          <div>
+            <input id="colourBlue" name="colour" type="radio" value="blue" />
+            <label for="colourBlue">Blue</label>
+          </div>
+        </fieldset>
+
+        <div>
+          <label for="size">T-shirt size</label>
+          <select id="size" name="size" required>
+            <option value="">Select 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>
+
+        <button type="submit">Place order</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Mahmoud Shaabo</h2>
     </footer>
   </body>
 </html>

From 0c342f945f922a077095d35d5b90aca55de59000 Mon Sep 17 00:00:00 2001
From: Mahmoud <obscureman999@gmail.com>
Date: Tue, 3 Feb 2026 10:41:09 +0000
Subject: [PATCH 2/2] Improve accessibility touch targets and fix name
 validation pattern

---
 Form-Controls/index.html | 54 ++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index aa18d1335..bfb661e45 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,30 +3,41 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>My form exercise - Mahmoud Shaabo</title>
     <meta name="description" content="Form controls project for CYF" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
+
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
+
     <main>
+      <!-- No action attribute (required by the assignment) -->
       <form>
+        <!-- Customer name: required, min length 2, must contain at least one non-space character -->
         <div>
           <label for="customerName">Customer name</label>
+          <br />
           <input
             id="customerName"
             name="customerName"
             type="text"
             required
             minlength="2"
+            pattern=".*\S.*"
+            title="Name must contain at least one non-space character."
             autocomplete="name"
           />
         </div>
 
+        <br />
+
+        <!-- Customer email: required, must be a valid email format -->
         <div>
           <label for="customerEmail">Customer email</label>
+          <br />
           <input
             id="customerEmail"
             name="customerEmail"
@@ -36,30 +47,42 @@ <h1>Product Pick</h1>
           />
         </div>
 
+        <br />
+
+        <!-- Colour: required, exactly 3 options.
+             Accessibility: fieldset + legend.
+             Touch targets: wrap input inside label so the text becomes clickable (bigger target) -->
         <fieldset>
           <legend>T-shirt colour</legend>
+
           <div>
-            <input
-              id="colourBlack"
-              name="colour"
-              type="radio"
-              value="black"
-              required
-            />
-            <label for="colourBlack">Black</label>
+            <label>
+              <input name="colour" type="radio" value="black" required />
+              Black
+            </label>
           </div>
+
           <div>
-            <input id="colourWhite" name="colour" type="radio" value="white" />
-            <label for="colourWhite">White</label>
+            <label>
+              <input name="colour" type="radio" value="white" />
+              White
+            </label>
           </div>
+
           <div>
-            <input id="colourBlue" name="colour" type="radio" value="blue" />
-            <label for="colourBlue">Blue</label>
+            <label>
+              <input name="colour" type="radio" value="blue" />
+              Blue
+            </label>
           </div>
         </fieldset>
 
+        <br />
+
+        <!-- Size: required, exactly 6 options -->
         <div>
           <label for="size">T-shirt size</label>
+          <br />
           <select id="size" name="size" required>
             <option value="">Select a size...</option>
             <option value="XS">XS</option>
@@ -71,10 +94,15 @@ <h1>Product Pick</h1>
           </select>
         </div>
 
+        <br />
+
+        <!-- Submit button -->
         <button type="submit">Place order</button>
       </form>
     </main>
+
     <footer>
+      <hr />
       <h2>By Mahmoud Shaabo</h2>
     </footer>
   </body>
