From e43eda1155712832f9387797958940acfc191f99 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sat, 24 Jan 2026 05:29:24 +0000
Subject: [PATCH 1/9] Add semantic form structure using fieldset and legend

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..e7b16c91d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,10 +13,11 @@ <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-->
+       <fieldset>
+        <legend>
+          T-shirt Order
+        </legend>
+       </fieldset>
       </form>
     </main>
     <footer>

From 8ab32e3bc945e7d2f56b7ad0522193e65aa203e7 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sat, 24 Jan 2026 09:09:19 +0000
Subject: [PATCH 2/9] Add required name field with minimum length validation

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e7b16c91d..4a6a5f5cd 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,9 +14,16 @@ <h1>Product Pick</h1>
     <main>
       <form>
        <fieldset>
-        <legend>
-          T-shirt Order
-        </legend>
+        <legend>T-shirt Order</legend>
+        <Div>
+          <label for="full-name">Full Name</label>
+          <input 
+          id="full-name"
+          name="fullName"
+          type="text"
+          required minlength="2"
+          />
+        </Div>
        </fieldset>
       </form>
     </main>

From c32bc4caf9d4b5b9377d3c3d16bf4e11296132c8 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sat, 24 Jan 2026 09:20:15 +0000
Subject: [PATCH 3/9] Add required email field with HTML email validation

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4a6a5f5cd..cbb70aa1d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -15,7 +15,7 @@ <h1>Product Pick</h1>
       <form>
        <fieldset>
         <legend>T-shirt Order</legend>
-        <Div>
+        <div>
           <label for="full-name">Full Name</label>
           <input 
           id="full-name"
@@ -23,7 +23,16 @@ <h1>Product Pick</h1>
           type="text"
           required minlength="2"
           />
-        </Div>
+        </div>
+        <div>
+          <label for="email">Email address</label>
+          <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          />
+        </div>
        </fieldset>
       </form>
     </main>

From d1e02cb3b5448b2124e09ea66e0b5297cc084100 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sat, 24 Jan 2026 15:41:49 +0000
Subject: [PATCH 4/9] Add choose a colour radio button

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index cbb70aa1d..f9698d1a9 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -33,6 +33,37 @@ <h1>Product Pick</h1>
           required
           />
         </div>
+        <fieldset>
+          <legend>Choose a colour</legend>
+          <div>
+            <input
+            type="radio"
+            id="colour-black"
+            name="colour"
+            value="black"
+            required
+            />
+            <label for="colour-black">Black</label>
+            <div>
+              <input
+              type="radio"
+              id="colour-white"
+              name="colour"
+              value="white"
+              />
+              <label for="colour-white">White</label>
+            </div>
+            <div>
+              <input
+              type="radio"
+              id="colour-navy"
+              name="colour"
+              value="navy"
+              />
+              <label for="colour-navy">Navy</label>
+            </div>
+          </div>
+        </fieldset>
        </fieldset>
       </form>
     </main>

From df0b49e1b9d4b99a7f235f66dc50f35bcef41d92 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sat, 24 Jan 2026 15:44:03 +0000
Subject: [PATCH 5/9] Reviewing success criteria and tracking completed
 requirements

---
 Form-Controls/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index bfcdf6c0b..e3177c3dd 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -35,12 +35,12 @@ Let's write out our testable criteria. Check each one off as you complete it.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
+- [x] My form is semantic html.
+- [x] All inputs have associated labels.
 - [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
 - [ ] I require one size from a defined set of 6 sizes.
 
 ## Resources

From 7d81da9a69c6a341e2b31cbb1b65056fc68ba8f4 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sun, 25 Jan 2026 18:59:28 +0000
Subject: [PATCH 6/9] complete form controls with required fields'

---
 Form-Controls/index.html | 136 ++++++++++++++++++++++-----------------
 1 file changed, 76 insertions(+), 60 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f9698d1a9..4ae64d742 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,75 +1,91 @@
 <!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="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-       <fieldset>
+
+<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="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+  <main>
+    <form>
+      <fieldset>
         <legend>T-shirt Order</legend>
         <div>
           <label for="full-name">Full Name</label>
-          <input 
-          id="full-name"
-          name="fullName"
-          type="text"
-          required minlength="2"
-          />
+          <input id="full-name" name="fullName" type="text" required minlength="2" />
         </div>
         <div>
           <label for="email">Email address</label>
-          <input
-          id="email"
-          name="email"
-          type="email"
-          required
-          />
+          <input id="email" name="email" type="email" required />
         </div>
         <fieldset>
           <legend>Choose a colour</legend>
+
           <div>
-            <input
-            type="radio"
-            id="colour-black"
-            name="colour"
-            value="black"
-            required
-            />
+            <input type="radio" id="colour-black" name="colour" value="black" required />
             <label for="colour-black">Black</label>
-            <div>
-              <input
-              type="radio"
-              id="colour-white"
-              name="colour"
-              value="white"
-              />
-              <label for="colour-white">White</label>
-            </div>
-            <div>
-              <input
-              type="radio"
-              id="colour-navy"
-              name="colour"
-              value="navy"
-              />
-              <label for="colour-navy">Navy</label>
-            </div>
+          </div>
+
+          <div>
+            <input type="radio" id="colour-white" name="colour" value="white" />
+            <label for="colour-white">White</label>
+          </div>
+
+          <div>
+            <input type="radio" id="colour-navy" name="colour" value="navy" />
+            <label for="colour-navy">Navy</label>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Choose a size</legend>
+
+          <div>
+            <input type="radio" id="size-xs" name="size" value="XS" required />
+            <label for="size-xs">XS</label>
+          </div>
+
+          <div>
+            <input type="radio" id="size-s" name="size" value="S" />
+            <label for="size-s">S</label>
+          </div>
+
+          <div>
+            <input type="radio" id="size-m" name="size" value="M" />
+            <label for="size-m">M</label>
+          </div>
+
+          <div>
+            <input type="radio" id="size-l" name="size" value="L" />
+            <label for="size-l">L</label>
+          </div>
+
+          <div>
+            <input type="radio" id="size-xl" name="size" value="XL" />
+            <label for="size-xl">XL</label>
+          </div>
+
+          <div>
+            <input type="radio" id="size-xxl" name="size" value="XXL" />
+            <label for="size-xxl">XXL</label>
           </div>
         </fieldset>
-       </fieldset>
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
+        <button type="submit">Submit</button>
+
+      </fieldset>
+    </form>
+  </main>
+  <footer>
+    <!-- change to your name-->
+    <h2>By Kayanat Suleman</h2>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file

From 71ebcea40597308b95a61558d2b46ded73d382a1 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Sun, 25 Jan 2026 19:00:57 +0000
Subject: [PATCH 7/9] updating requirements sheet

---
 Form-Controls/README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index e3177c3dd..7c3f86c02 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -4,10 +4,10 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -30,7 +30,7 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
@@ -41,7 +41,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
 - [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
 - [x] I require a valid email.
 - [x] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] I require one size from a defined set of 6 sizes.
 
 ## Resources
 

From 1520431f69102c435bdbf412b36c5c249ff8eb68 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Mon, 26 Jan 2026 11:17:08 +0000
Subject: [PATCH 8/9] Update checklist with 100 Lighthouse accessibility score

---
 Form-Controls/README.md  |   2 +-
 Form-Controls/index.html | 126 +++++++++++++++++++--------------------
 2 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index 7c3f86c02..1028d39dc 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -37,7 +37,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
 
 - [x] My form is semantic html.
 - [x] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
+- [x] My Lighthouse Accessibility score is 100.
 - [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
 - [x] I require a valid email.
 - [x] I require one colour from a defined set of 3 colours.
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4ae64d742..bea945308 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,91 +1,85 @@
 <!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="viewport" content="width=device-width, initial-scale=1" />
+  </head>
 
-<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="viewport" content="width=device-width, initial-scale=1" />
-</head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
 
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-    <form>
-      <fieldset>
-        <legend>T-shirt Order</legend>
-        <div>
-          <label for="full-name">Full Name</label>
-          <input id="full-name" name="fullName" type="text" required minlength="2" />
-        </div>
-        <div>
-          <label for="email">Email address</label>
-          <input id="email" name="email" type="email" required />
-        </div>
+    <main>
+      <form>
         <fieldset>
-          <legend>Choose a colour</legend>
+          <legend>T-shirt Order</legend>
 
           <div>
-            <input type="radio" id="colour-black" name="colour" value="black" required />
-            <label for="colour-black">Black</label>
+            <label>
+              Full Name
+              <input
+                id="full-name"
+                name="fullName"
+                type="text"
+                required
+                minlength="2"
+              />
+            </label>
           </div>
 
-          <div>
-            <input type="radio" id="colour-white" name="colour" value="white" />
-            <label for="colour-white">White</label>
-          </div>
+          <br /><br />
 
           <div>
-            <input type="radio" id="colour-navy" name="colour" value="navy" />
-            <label for="colour-navy">Navy</label>
+            <label>
+              Email address
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+              />
+            </label>
           </div>
-        </fieldset>
 
-        <fieldset>
-          <legend>Choose a size</legend>
-
-          <div>
-            <input type="radio" id="size-xs" name="size" value="XS" required />
-            <label for="size-xs">XS</label>
-          </div>
+          <br /><br />
 
           <div>
-            <input type="radio" id="size-s" name="size" value="S" />
-            <label for="size-s">S</label>
+            <label for="colour">Choose a colour</label><br />
+            <select id="colour" name="colour" required>
+              <option value="" disabled selected>Select a colour</option>
+              <option value="black">Black</option>
+              <option value="white">White</option>
+              <option value="navy">Navy</option>
+            </select>
           </div>
 
-          <div>
-            <input type="radio" id="size-m" name="size" value="M" />
-            <label for="size-m">M</label>
-          </div>
+          <br /><br />
 
           <div>
-            <input type="radio" id="size-l" name="size" value="L" />
-            <label for="size-l">L</label>
+            <label for="size">Choose a size</label><br />
+            <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>
+              <option value="L">L</option>
+              <option value="XL">XL</option>
+              <option value="XXL">XXL</option>
+            </select>
           </div>
 
-          <div>
-            <input type="radio" id="size-xl" name="size" value="XL" />
-            <label for="size-xl">XL</label>
-          </div>
+          <br /><br />
 
-          <div>
-            <input type="radio" id="size-xxl" name="size" value="XXL" />
-            <label for="size-xxl">XXL</label>
-          </div>
+          <button type="submit">Submit</button>
         </fieldset>
-        <button type="submit">Submit</button>
-
-      </fieldset>
-    </form>
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By Kayanat Suleman</h2>
-  </footer>
-</body>
+      </form>
+    </main>
 
+    <footer>
+      <h2>By Kayanat Suleman</h2>
+    </footer>
+  </body>
 </html>
\ No newline at end of file

From 1a4e3fe8d212f6423091afd6890a05c12a9106f5 Mon Sep 17 00:00:00 2001
From: KayanatSuleman <kayanat.suleman@yahoo.co.uk>
Date: Tue, 27 Jan 2026 21:22:16 +0000
Subject: [PATCH 9/9] Updating naming heading size

---
 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 bea945308..01e7f53d4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -79,7 +79,7 @@ <h1>Product Pick</h1>
     </main>
 
     <footer>
-      <h2>By Kayanat Suleman</h2>
+      <h1>By Kayanat Suleman</h1>
     </footer>
   </body>
 </html>
\ No newline at end of file