From 37961e3d41f70ecf4e847dfe84836ca121d221f7 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Fri, 11 Sep 2026 16:47:02 +0100
Subject: [PATCH 1/8] Add name field

---
 Form-Controls/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..6b926b43e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -12,11 +12,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-->
+      <form class="form">
+        <label for="name">Name:</label>
+        <input type="text" name="name" id="name" minlength="2" required />
+
+        <br /><br />
       </form>
     </main>
     <footer>

From e040675c3597e34db002bc08dc75324e4ffc17f7 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 10:17:44 +0100
Subject: [PATCH 2/8] Add Email field

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 6b926b43e..4b8784e08 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,6 +17,11 @@ <h1>Product Pick</h1>
         <input type="text" name="name" id="name" minlength="2" required />
 
         <br /><br />
+
+        <label for="email"> Email:</label>
+        <input type="email" name="email" id="email" required />
+
+        <br /><br />
       </form>
     </main>
     <footer>

From 2209ca496d997c78e1ce4ae6fc2c5aed605b1cb7 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 10:32:41 +0100
Subject: [PATCH 3/8] Add colour selector

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4b8784e08..cc6fef2c5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -22,6 +22,16 @@ <h1>Product Pick</h1>
         <input type="email" name="email" id="email" required />
 
         <br /><br />
+
+        <label for="colour"> Colour: </label>
+        <select name="colour" id="coloud" required>
+          <option value="" selected disabled>Select</option>
+          <option value="red">Red</option>
+          <option value="green">Green</option>
+          <option value="red">Red</option>
+        </select>
+
+        <br /><br />
       </form>
     </main>
     <footer>

From 98a1815f14568549351f55a4614f43a696271d28 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 11:47:05 +0100
Subject: [PATCH 4/8] Add size selector

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index cc6fef2c5..66641c9a4 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -32,6 +32,34 @@ <h1>Product Pick</h1>
         </select>
 
         <br /><br />
+
+        <fieldset>
+          <legend>Size</legend>
+
+          <label for="XS">XS</label>
+          <input type="radio" name="size" id="XS" value="XS" required />
+          <br /><br />
+
+          <label for="S">S</label>
+          <input type="radio" name="size" id="S" value="S" />
+          <br /><br />
+
+          <label for="M">M</label>
+          <input type="radio" name="size" id="M" value="M" />
+          <br /><br />
+
+          <label for="L">L</label>
+          <input type="radio" name="size" id="L" value="L" />
+          <br /><br />
+
+          <label for="XS">XL</label>
+          <input type="radio" name="size" id="XL" value="XL" />
+          <br /><br />
+
+          <label for="XS">XXL</label>
+          <input type="radio" name="size" id="XXL" value="XXL" />
+          <br /><br />
+        </fieldset>
       </form>
     </main>
     <footer>

From 91005b6f33a7c5bef7912079fd175b2f4853f8b8 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 11:48:42 +0100
Subject: [PATCH 5/8] Add submit button

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 66641c9a4..f82b2a502 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -60,6 +60,10 @@ <h1>Product Pick</h1>
           <input type="radio" name="size" id="XXL" value="XXL" />
           <br /><br />
         </fieldset>
+
+        <br /><br />
+
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>

From 61dcc8b0ca940aa41897ae4eeb8fe2d72a09db97 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 11:49:53 +0100
Subject: [PATCH 6/8] Add name to footer

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f82b2a502..23763907e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -67,8 +67,7 @@ <h1>Product Pick</h1>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Ahmed Elmahmoudi</p>
     </footer>
   </body>
 </html>

From 049784bd9b5965c9ea656954a646ebf1f8e1b390 Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 15:44:50 +0100
Subject: [PATCH 7/8] Apply lighthouse fixes

---
 Form-Controls/README.md  | 33 +++++++++++++++++----------------
 Form-Controls/index.html |  8 ++++----
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index c356f8844..d9bf2d07d 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
+- [x] Use version control by committing often and pushing regularly to GitHub
+- [x] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -29,7 +29,7 @@ All fields are required.
 Do not write a form action for this project.
 
 > [!TIP]
-> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. 
+> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`.
 >
 > Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form!
 
@@ -39,18 +39,18 @@ 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 only used HTML and CSS.
-- [ ] I have not used any JavaScript.
+- [x] I have only used HTML and CSS.
+- [x] I have not used any JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic HTML.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. 
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] My form is semantic HTML.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 
@@ -65,6 +65,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
 - [ ] I commit often and push regularly to GitHub
 
 ## Resources
+
 - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
 - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
 - [Lighthouse](https://developers.google.com/web/tools/lighthouse)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 23763907e..7ea0c3fda 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -24,8 +24,8 @@ <h1>Product Pick</h1>
         <br /><br />
 
         <label for="colour"> Colour: </label>
-        <select name="colour" id="coloud" required>
-          <option value="" selected disabled>Select</option>
+        <select name="colour" id="colour" required>
+          <option value="select" selected disabled>Select</option>
           <option value="red">Red</option>
           <option value="green">Green</option>
           <option value="red">Red</option>
@@ -52,11 +52,11 @@ <h1>Product Pick</h1>
           <input type="radio" name="size" id="L" value="L" />
           <br /><br />
 
-          <label for="XS">XL</label>
+          <label for="XL">XL</label>
           <input type="radio" name="size" id="XL" value="XL" />
           <br /><br />
 
-          <label for="XS">XXL</label>
+          <label for="XXL">XXL</label>
           <input type="radio" name="size" id="XXL" value="XXL" />
           <br /><br />
         </fieldset>

From 5c1bcb2a536951c4fb3303b8a9cb87a6a2d02ebe Mon Sep 17 00:00:00 2001
From: Ahmed Elmahmoudi <a.alaterry@gmail.com>
Date: Sat, 12 Sep 2026 15:47:14 +0100
Subject: [PATCH 8/8] tick all requirements

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

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index d9bf2d07d..4d87e98a8 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -59,10 +59,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [x] My code is consistently formatted
+- [x] My page content is free of typos and grammatical mistakes
+- [x] I commit often and push regularly to GitHub
 
 ## Resources
 
