From 42e810445aa6ee4158034b6bae13c7a79118ff2f Mon Sep 17 00:00:00 2001
From: Ammad <anosidium@hotmail.com>
Date: Fri, 3 Oct 2025 18:36:03 +0100
Subject: [PATCH 1/5] Build the form to confirm the t-shirt order

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..f17bbc637 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,6 +13,38 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
+        <fieldset>
+          <p>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="forename" required />
+          </p>
+          <p>
+            <label for="email">E-Mail:</label>
+            <input type="email" id="email" name="email" required />
+          </p>
+          <p>
+            <label for="tshirtcolour">T-shirt colour:</label>
+            <ul>
+              <li><input type="radio" id="colour1" name="tshirtcolour" value="blue" required /> Blue</li>
+              <li><input type="radio" id="colour2" name="tshirtcolour" value="red" required /> Red</li>
+              <li><input type="radio" id="colour3" name="tshirtcolour" value="white" required /> White</li>
+            </ul>
+          </p>
+          <p>
+            <label for="tshirtsize">T-shirt size:</label>
+            <ul>
+              <li><input type="radio" id="tshirtsize1" name="tshirtsize" value="xs" required /> XS</li>
+              <li><input type="radio" id="tshirtsize2" name="tshirtsize" value="s" required /> S</li>
+              <li><input type="radio" id="tshirtsize3" name="tshirtsize" value="m" required /> M</li>
+              <li><input type="radio" id="tshirtsize4" name="tshirtsize" value="l" required /> L</li>
+              <li><input type="radio" id="tshirtsize5" name="tshirtsize" value="xl" required /> XL</li>
+              <li><input type="radio" id="tshirtsize6" name="tshirtsize" value="xxl" required /> XXL</li>
+            </ul>
+          </p>
+          <p>
+            <button type="submit">Confirm Order</button>
+          </p>
+        </fieldset>
         <!-- write your html here-->
         <!-- 
           try writing out the requirements first as comments

From 1d0539d3a6e7681131846505addeea46fb60a988 Mon Sep 17 00:00:00 2001
From: Ammad <anosidium@hotmail.com>
Date: Fri, 3 Oct 2025 19:24:38 +0100
Subject: [PATCH 2/5] Add a validation rule of minimum length of two or more
 characters for name input

---
 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 f17bbc637..9667a915b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,7 +16,7 @@ <h1>Product Pick</h1>
         <fieldset>
           <p>
             <label for="name">Name:</label>
-            <input type="text" id="name" name="forename" required />
+            <input type="text" id="name" name="forename" minlength="2" required />
           </p>
           <p>
             <label for="email">E-Mail:</label>

From 4450562ef55e00fe57516b4ec4f919ea80a61d7a Mon Sep 17 00:00:00 2001
From: Ammad <anosidium@hotmail.com>
Date: Fri, 3 Oct 2025 19:50:19 +0100
Subject: [PATCH 3/5] Fix the mistakes reported from Google Chrome Lighthouse
 Accessibility audit report

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 9667a915b..08b348508 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,29 +16,29 @@ <h1>Product Pick</h1>
         <fieldset>
           <p>
             <label for="name">Name:</label>
-            <input type="text" id="name" name="forename" minlength="2" required />
+            <input type="text" id="name" name="name" minlength="2" required />
           </p>
           <p>
             <label for="email">E-Mail:</label>
             <input type="email" id="email" name="email" required />
           </p>
           <p>
-            <label for="tshirtcolour">T-shirt colour:</label>
+            T-shirt colour:
             <ul>
-              <li><input type="radio" id="colour1" name="tshirtcolour" value="blue" required /> Blue</li>
-              <li><input type="radio" id="colour2" name="tshirtcolour" value="red" required /> Red</li>
-              <li><input type="radio" id="colour3" name="tshirtcolour" value="white" required /> White</li>
+              <li><input type="radio" id="tshirtcolour1" name="tshirtcolour" value="blue" required /> <label for="tshirtcolour1">Blue</label></li>
+              <li><input type="radio" id="tshirtcolour2" name="tshirtcolour" value="red" required /> <label for="tshirtcolour2">Red</label></li>
+              <li><input type="radio" id="tshirtcolour3" name="tshirtcolour" value="white" required /> <label for="tshirtcolour3">White</label></li>
             </ul>
           </p>
           <p>
-            <label for="tshirtsize">T-shirt size:</label>
+            T-shirt size:
             <ul>
-              <li><input type="radio" id="tshirtsize1" name="tshirtsize" value="xs" required /> XS</li>
-              <li><input type="radio" id="tshirtsize2" name="tshirtsize" value="s" required /> S</li>
-              <li><input type="radio" id="tshirtsize3" name="tshirtsize" value="m" required /> M</li>
-              <li><input type="radio" id="tshirtsize4" name="tshirtsize" value="l" required /> L</li>
-              <li><input type="radio" id="tshirtsize5" name="tshirtsize" value="xl" required /> XL</li>
-              <li><input type="radio" id="tshirtsize6" name="tshirtsize" value="xxl" required /> XXL</li>
+              <li><input type="radio" id="tshirtsize1" name="tshirtsize" value="xs" required /> <label for="tshirtsize1">XS</label></li>
+              <li><input type="radio" id="tshirtsize2" name="tshirtsize" value="s" required /> <label for="tshirtsize2">S</label></li>
+              <li><input type="radio" id="tshirtsize3" name="tshirtsize" value="m" required /> <label for="tshirtsize3">M</label></li>
+              <li><input type="radio" id="tshirtsize4" name="tshirtsize" value="l" required /> <label for="tshirtsize4">L</label></li>
+              <li><input type="radio" id="tshirtsize5" name="tshirtsize" value="xl" required /> <label for="tshirtsize5">XL</label></li>
+              <li><input type="radio" id="tshirtsize6" name="tshirtsize" value="xxl" required /> <label for="tshirtsize6">XXL</label></li>
             </ul>
           </p>
           <p>

From bc95d78e2ee935cb6f68392313bea0bdfd5ce353 Mon Sep 17 00:00:00 2001
From: Ammad <anosidium@hotmail.com>
Date: Fri, 3 Oct 2025 19:56:38 +0100
Subject: [PATCH 4/5] Add autocomplete attribute for name and e-mail input
 control to support browser auto-fill feature.

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 08b348508..604a6a946 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,11 +16,11 @@ <h1>Product Pick</h1>
         <fieldset>
           <p>
             <label for="name">Name:</label>
-            <input type="text" id="name" name="name" minlength="2" required />
+            <input type="text" id="name" name="name" minlength="2" autocomplete="name" required />
           </p>
           <p>
             <label for="email">E-Mail:</label>
-            <input type="email" id="email" name="email" required />
+            <input type="email" id="email" name="email" autocomplete="email" required />
           </p>
           <p>
             T-shirt colour:

From 8c0deb2d6e182ff4fb9bd75c1e9d412340dfb81d Mon Sep 17 00:00:00 2001
From: Ammad <anosidium@hotmail.com>
Date: Fri, 3 Oct 2025 20:03:16 +0100
Subject: [PATCH 5/5] Add sufficient spacing between the radio controls because
 of the Accessibility audit report from Chrome

---
 Form-Controls/index.html | 45 ++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 604a6a946..b6ef07fee 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -25,20 +25,47 @@ <h1>Product Pick</h1>
           <p>
             T-shirt colour:
             <ul>
-              <li><input type="radio" id="tshirtcolour1" name="tshirtcolour" value="blue" required /> <label for="tshirtcolour1">Blue</label></li>
-              <li><input type="radio" id="tshirtcolour2" name="tshirtcolour" value="red" required /> <label for="tshirtcolour2">Red</label></li>
-              <li><input type="radio" id="tshirtcolour3" name="tshirtcolour" value="white" required /> <label for="tshirtcolour3">White</label></li>
+              <li>
+                <input type="radio" id="tshirtcolour1" name="tshirtcolour" value="blue" required /> <label for="tshirtcolour1">Blue</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtcolour2" name="tshirtcolour" value="red" required /> <label for="tshirtcolour2">Red</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtcolour3" name="tshirtcolour" value="white" required /> <label for="tshirtcolour3">White</label>
+                <br  /><br  />
+            </li>
             </ul>
           </p>
           <p>
             T-shirt size:
             <ul>
-              <li><input type="radio" id="tshirtsize1" name="tshirtsize" value="xs" required /> <label for="tshirtsize1">XS</label></li>
-              <li><input type="radio" id="tshirtsize2" name="tshirtsize" value="s" required /> <label for="tshirtsize2">S</label></li>
-              <li><input type="radio" id="tshirtsize3" name="tshirtsize" value="m" required /> <label for="tshirtsize3">M</label></li>
-              <li><input type="radio" id="tshirtsize4" name="tshirtsize" value="l" required /> <label for="tshirtsize4">L</label></li>
-              <li><input type="radio" id="tshirtsize5" name="tshirtsize" value="xl" required /> <label for="tshirtsize5">XL</label></li>
-              <li><input type="radio" id="tshirtsize6" name="tshirtsize" value="xxl" required /> <label for="tshirtsize6">XXL</label></li>
+              <li>
+                <input type="radio" id="tshirtsize1" name="tshirtsize" value="xs" required /> <label for="tshirtsize1">XS</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtsize2" name="tshirtsize" value="s" required /> <label for="tshirtsize2">S</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtsize3" name="tshirtsize" value="m" required /> <label for="tshirtsize3">M</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtsize4" name="tshirtsize" value="l" required /> <label for="tshirtsize4">L</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtsize5" name="tshirtsize" value="xl" required /> <label for="tshirtsize5">XL</label>
+                <br  /><br  />
+              </li>
+              <li>
+                <input type="radio" id="tshirtsize6" name="tshirtsize" value="xxl" required /> <label for="tshirtsize6">XXL</label>
+                <br  /><br  />
+              </li>
             </ul>
           </p>
           <p>