From 314bce20a35054d39da81d966b44181bb5a3534a Mon Sep 17 00:00:00 2001
From: Fattouma Ouannassi <fatt13967@gmail.com>
Date: Tue, 20 Jan 2026 22:51:34 +0000
Subject: [PATCH 1/2] Glasgow| 26-ITP-Jan|Fattouma Ouannassi| Sprint 2 | Form
 Controls <!--
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

You must title your PR like this:

Region | Cohort | FirstName LastName | Sprint | Assignment Title

For example,

London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock

Fill in the template below - remove any sections that don't apply.

Complete the self checklist - replace each empty box in the checklist [ ] with a [x].

Add the label "Needs Review" and you will get review.

Respond to volunteer reviews until the volunteer marks it as "Complete".

-->

## Learners, PR Template

Self checklist

- [x] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
- [x] My changes meet the requirements of the task
- [x] I have tested my changes
- [x] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/)

## Changelist

This PR includes modifications to the HTML file to create an order form for customers to order T-Shirts.
[✓] My form is semantic html.
[✓] 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.
[✓] I require one size from a defined set of 6 sizes.

## Questions

/
---
 Form-Controls/index.html | 51 +++++++++++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..a280f0f40 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,51 @@
       <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>
+      <form><libel for="name">Customer name:</libel><br>
+        <input
+        type="text"
+        id="name"
+        title="Name must contain only letters and spaces"><br><br>
+
+        <label for="email">Email Address</label>
+        <br>
+        <input
+        type="email"
+        id="email"
+        name="email"
+        required>
+        <br><br>
+       <label for="colour">T-Shirt Colour:</label> 
+       <br>
+       <select id="colour" name="colour"required>
+<option value="select a colour">Select a colour</option>
+<option value="Pink">Pink</option>
+<option value="Aqua">Aqua</option>
+<option value="White">White</option>
+</select>
+<br><br>
+<fieldset>
+  <legend>T-Shirt Size</legend>
+  <input type="radio" id="xs" name="size" value="xs">
+  <label for="xs">xs</label>
+  <input type="radio" id="s" name="size" value="s">
+  <label for="s">s</label>
+  <input type="radio" id="m" name="size" value="m">
+  <label for="m">m</label>
+  <input type="radio" id="l" name="size" value="l">
+<label for="l">l</label>
+<input type="radio" id="xl" name="size" value="xl">
+<label for="xl">xl</label>
+<input type="radio" id="xxl" name="size" value="xxl">
+<label for="xxl">xxl</label>
+
+  </fieldset>
+
+    </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <!-- Fattouma Ouannassi-->
+      <h2>Fattouma Ouannassi</h2>
     </footer>
   </body>
 </html>

From 709c10ae44cbc178cc6a6485149c44bd19172f7d Mon Sep 17 00:00:00 2001
From: Fattouma Ouannassi <fatt13967@gmail.com>
Date: Sun, 25 Jan 2026 22:04:24 +0000
Subject: [PATCH 2/2] Fix HTML issues from PR review

---
 Form-Controls/index.html | 87 ++++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 30 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a280f0f40..663c75256 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,51 +12,78 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form><libel for="name">Customer name:</libel><br>
-        <input
-        type="text"
-        id="name"
-        title="Name must contain only letters and spaces"><br><br>
+      <form>
+
+        <!--Customer Name-->
+       <label for="name">Full Name:</label>
+        <input type="text" placeholder="Enter your name" id="name" minlength="2" pattern="[A-Za-z ]+"
+  title="Name should contain only letters and spaces" required><br><br>
 
-        <label for="email">Email Address</label>
-        <br>
+        <!--Customer Email-->
+        <label for="email">Email Address:</label>
         <input
         type="email"
+        placeholder="Enter your email"
         id="email"
         name="email"
         required>
         <br><br>
-       <label for="colour">T-Shirt Colour:</label> 
-       <br>
-       <select id="colour" name="colour"required>
-<option value="select a colour">Select a colour</option>
-<option value="Pink">Pink</option>
-<option value="Aqua">Aqua</option>
-<option value="White">White</option>
-</select>
-<br><br>
+       <!--Product Pick-->
+       <fieldset>
+  <legend>Choose T-shirt Colour</legend>
+      <label>
+            <input
+              type="radio"
+              name="colour"
+              value="white"
+              required> 
+              White
+            </label>
+
+            <label>
+            <input
+              type="radio"
+              name="colour"
+              value="aqua"
+              required>
+              Aqua
+            </label>
+
+            <label>
+            <input
+              type="radio"
+              name="colour"
+              value="pink"
+              required>
+              Pink
+            </label>
+          </fieldset>
+       
+
+<br>
 <fieldset>
-  <legend>T-Shirt Size</legend>
+  <legend>Choose T-Shirt Size</legend>
   <input type="radio" id="xs" name="size" value="xs">
-  <label for="xs">xs</label>
-  <input type="radio" id="s" name="size" value="s">
-  <label for="s">s</label>
-  <input type="radio" id="m" name="size" value="m">
-  <label for="m">m</label>
-  <input type="radio" id="l" name="size" value="l">
-<label for="l">l</label>
-<input type="radio" id="xl" name="size" value="xl">
-<label for="xl">xl</label>
-<input type="radio" id="xxl" name="size" value="xxl">
-<label for="xxl">xxl</label>
+  <label for="xs">XS</label>
+  <input type="radio" id="s" name="size" value="S">
+  <label for="s">S</label>
+  <input type="radio" id="m" name="size" value="M">
+  <label for="m">M</label>
+  <input type="radio" id="l" name="size" value="L">
+<label for="l">L</label>
+<input type="radio" id="xl" name="size" value="XL">
+<label for="xl">XL</label>
+<input type="radio" id="xxl" name="size" value="XXL">
+<label for="xxl">XXL</label>
 
-  </fieldset>
+  </fieldset><br><br>
+  <button type="submit">Submit</button>
 
     </form>
     </main>
     <footer>
       <!-- Fattouma Ouannassi-->
-      <h2>Fattouma Ouannassi</h2>
+      <h2>By Fattouma Ouannassi</h2>
     </footer>
   </body>
 </html>