CodeYourFuture · Frumentius-Rev · Sep 9, 2026 · Sep 10, 2026 · Sep 10, 2026 · Sep 10, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -10,6 +10,7 @@
 - [ ] 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
+
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -29,7 +30,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!
 
@@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
 - [ ] 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 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.
@@ -65,6 +66,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
@@ -1,27 +1,72 @@
-<!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="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
       <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="name">Name:</label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            pattern=".*\S.*\S.*"
+            required
+          />
+        </div>
+
+        <div>
+          <label for="email">Email:</label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="cyftrainee@gmail.com"
+            required
+          />
+        </div>
+
+        <fieldset>
+          <legend>T-Shirt Colour</legend>
+
+          <label for="white">White</label>
+          <input type="radio" name="colour" id="white" value="white" required />
+
+          <label for="black">Black</label>
+          <input type="radio" name="colour" id="black" value="black" required />
+
+          <label for="blue">Blue</label>
+          <input type="radio" name="colour" id="blue" value="blue" required />
+        </fieldset>
+
+        <div>
+          <label for="size">T-shirt Size</label>
+          <select name="size" id="size" required>
+            <option value="" disabled selected>Choose</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">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Frumentius-Rev</p>
     </footer>
   </body>
 </html>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
@@ -0,0 +1,54 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  max-width: 340px;
+  margin: 40px auto;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: #f5f5f5;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+input[type="text"],
+input[type="email"] {
+  width: 280px;
+}
+
+fieldset {
+  width: 280px;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+input,
+select {
+  padding: 10px;
+  margin-top: 5px;
+}
+
+button {
+  width: 120px;
+  padding: 10px;
+  border-radius: 6px;
+  display: block;
+  margin: 8px auto 0;
+  border: none;
+  background-color: rgb(44, 44, 247);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: rgb(65, 74, 206);
+}