From 29f9281053c1997f98d026cc3fd65aec65281b56 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 13 May 2026 17:04:01 +0100
Subject: [PATCH 1/9] feat:added firstname, lastname, email and shirt color.

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..2932f0224 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,6 +17,48 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+
+<!--        first and lastname (ensure it contains at least two non-space characters.)-->
+<!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+<!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+<!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+      <div class="form">
+
+        <div class="form-group">
+          <label for="firstname">First Name</label>
+          <input type="text" id="firstname" name="firstname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="lastname">Last Name</label>
+          <input type="text" id="lastname" name="lastname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+
+        <div class="form-group">
+          <fieldset>
+            <legend>Choose a shirt color:</legend>
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice1" name="shirt" value="blue">
+              <label for="choice1">Blue</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice2" name="shirt" value="green">
+              <label for="choice2">Green</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice3" name="shirt" value="yellow">
+              <label for="choice3">Yellow</label>
+            </div>
+          </fieldset>
+        </div>
+      </div>
       </form>
     </main>
     <footer>

From 694558fee87709af4dbaad676ec3b718a1a52895 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 13 May 2026 18:42:38 +0100
Subject: [PATCH 2/9] feat: all form fields completed.

---
 Form-Controls/index.html | 62 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2932f0224..4c71d609e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -26,44 +26,92 @@ <h1>Product Pick</h1>
 
         <div class="form-group">
           <label for="firstname">First Name</label>
-          <input type="text" id="firstname" name="firstname" required>
+          <input
+                  type="text"
+                  id="firstname"
+                  name="firstname"
+                  required
+                  pattern=""
+                  title=""
+          >
         </div>
 
         <div class="form-group">
           <label for="lastname">Last Name</label>
-          <input type="text" id="lastname" name="lastname" required>
+          <input
+                  type="text"
+                  id="lastname"
+                  name="lastname"
+                  required
+                  pattern=""
+                  title="">
         </div>
 
         <div class="form-group">
           <label for="email">Email</label>
-          <input type="email" id="email" name="email" required>
+          <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  required
+                  pattern=""
+                  title="">
         </div>
 
         <div class="form-group">
           <fieldset>
             <legend>Choose a shirt color:</legend>
             <div class="form-group-fieldset">
-              <input type="radio" id="choice1" name="shirt" value="blue">
+              <input
+                      type="radio"
+                      id="choice1"
+                      name="shirt"
+                      value="blue"
+              >
               <label for="choice1">Blue</label>
             </div>
 
             <div class="form-group-fieldset">
-              <input type="radio" id="choice2" name="shirt" value="green">
+              <input
+                      type="radio"
+                      id="choice2"
+                      name="shirt"
+                      value="green"
+              >
               <label for="choice2">Green</label>
             </div>
 
             <div class="form-group-fieldset">
-              <input type="radio" id="choice3" name="shirt" value="yellow">
+              <input
+                      type="radio"
+                      id="choice3"
+                      name="shirt"
+                      value="yellow"
+              >
               <label for="choice3">Yellow</label>
             </div>
           </fieldset>
         </div>
+
+        <div class="form-group">
+          <label for="sizing">Choose a size:</label>
+          <select id="sizing" name="size">
+            <option value="">--Please choose an option--</option>
+            <option value="ex-small">XS</option>
+            <option value="small">S</option>
+            <option value="medium">M</option>
+            <option value="large">L</option>
+            <option value="ex-large">XL</option>
+            <option value="ex-ex-large">XXL</option>
+
+          </select>
+        </div>
       </div>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By DAMILOLA ODUMOSU</p>
     </footer>
   </body>
 </html>

From 5388ad50d974eec00510e11e435a50f438709e57 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 16 May 2026 14:37:31 +0100
Subject: [PATCH 3/9] feat: new branch created.

---
 Form-Controls/index.html | 218 ++++++++++++++++++++-------------------
 1 file changed, 114 insertions(+), 104 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4c71d609e..5bec2a962 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,117 +1,127 @@
 <!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>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+<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="main.css">
 
-<!--        first and lastname (ensure it contains at least two non-space characters.)-->
-<!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
-<!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
-<!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
-      <div class="form">
+</head>
+<body>
+<header>
+  <div class="container">
+    <h1>Product Pick</h1>
+  </div>
+</header>
+<main>
+  <div class="container">
+    <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 class="form-group">
-          <label for="firstname">First Name</label>
-          <input
-                  type="text"
-                  id="firstname"
-                  name="firstname"
-                  required
-                  pattern=""
-                  title=""
-          >
-        </div>
+      <!--        first and lastname (ensure it contains at least two non-space characters.)-->
+      <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+      <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+      <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
 
-        <div class="form-group">
-          <label for="lastname">Last Name</label>
-          <input
-                  type="text"
-                  id="lastname"
-                  name="lastname"
-                  required
-                  pattern=""
-                  title="">
-        </div>
 
-        <div class="form-group">
-          <label for="email">Email</label>
-          <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  required
-                  pattern=""
-                  title="">
-        </div>
+      <div class="form-group">
+        <label for="firstname">First Name</label>
+        <input
+                type="text"
+                id="firstname"
+                name="firstname"
+                required
+                pattern=""
+                title=""
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="lastname">Last Name</label>
+        <input
+                type="text"
+                id="lastname"
+                name="lastname"
+                required
+                pattern=""
+                title="">
+      </div>
+
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                pattern=""
+                title="">
+      </div>
 
-        <div class="form-group">
-          <fieldset>
-            <legend>Choose a shirt color:</legend>
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice1"
-                      name="shirt"
-                      value="blue"
-              >
-              <label for="choice1">Blue</label>
-            </div>
+      <div class="form-group">
+        <fieldset>
+          <legend>Choose a shirt color:</legend>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice1"
+                    name="shirt"
+                    value="blue"
+            >
+            <label for="choice1">Blue</label>
+          </div>
 
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice2"
-                      name="shirt"
-                      value="green"
-              >
-              <label for="choice2">Green</label>
-            </div>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice2"
+                    name="shirt"
+                    value="green"
+            >
+            <label for="choice2">Green</label>
+          </div>
 
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice3"
-                      name="shirt"
-                      value="yellow"
-              >
-              <label for="choice3">Yellow</label>
-            </div>
-          </fieldset>
-        </div>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice3"
+                    name="shirt"
+                    value="yellow"
+            >
+            <label for="choice3">Yellow</label>
+          </div>
+        </fieldset>
+      </div>
 
-        <div class="form-group">
-          <label for="sizing">Choose a size:</label>
-          <select id="sizing" name="size">
-            <option value="">--Please choose an option--</option>
-            <option value="ex-small">XS</option>
-            <option value="small">S</option>
-            <option value="medium">M</option>
-            <option value="large">L</option>
-            <option value="ex-large">XL</option>
-            <option value="ex-ex-large">XXL</option>
+      <div class="form-group">
+        <label for="sizing">Choose a size:</label>
+        <select id="sizing" name="size">
+          <option value="">--Please choose an option--</option>
+          <option value="ex-small">XS</option>
+          <option value="small">S</option>
+          <option value="medium">M</option>
+          <option value="large">L</option>
+          <option value="ex-large">XL</option>
+          <option value="ex-ex-large">XXL</option>
 
-          </select>
-        </div>
+        </select>
       </div>
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By DAMILOLA ODUMOSU</p>
-    </footer>
-  </body>
+      <button>Submit</button>
+    </form>
+  </div>
+</main>
+
+<footer>
+  <!-- change to your name-->
+  <div class="container">
+    <p>By DAMILOLA ODUMOSU</p>
+  </div>
+</footer>
+</body>
 </html>
+

From f9c250508320c7bf7ddf0421beb45c9205f48398 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 23 May 2026 19:57:39 +0100
Subject: [PATCH 4/9] Moved changes to correct branch

---
 Form-Controls/index.html | 159 +++++++++++++++++++--------------------
 Form-Controls/main.css   |  57 ++++++++++++++
 2 files changed, 134 insertions(+), 82 deletions(-)
 create mode 100644 Form-Controls/main.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 5bec2a962..d2312a16d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,127 +1,122 @@
 <!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="main.css">
-
+    <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="main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
 </head>
 <body>
 <header>
-  <div class="container">
     <h1>Product Pick</h1>
-  </div>
 </header>
-<main>
-  <div class="container">
-    <form>
-      <!-- write your html here-->
-      <!--
-        try writing out the requirements first as comments
-      this will also help you fill in your PR message later-->
 
-      <!--        first and lastname (ensure it contains at least two non-space characters.)-->
-      <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
-      <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
-      <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+<form>
+    <!-- write your HTML here-->
+    <!--
+      try writing out the requirements first as comments
+    this will also help you fill in your PR message later-->
+
+    <!--        first and lastname (ensure it contains at least two non-space characters.)-->
+    <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+    <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+    <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
 
 
-      <div class="form-group">
-        <label for="firstname">First Name</label>
+    <div class="form-group">
+        <label for="firstname">First Name </label>
         <input
                 type="text"
                 id="firstname"
                 name="firstname"
                 required
-                pattern=""
-                title=""
-        >
-      </div>
+                pattern="^[A-Za-z\s'-]{2,}$"
+                title="first name must be more than 2 characters">
+    </div>
 
-      <div class="form-group">
+    <div class="form-group">
         <label for="lastname">Last Name</label>
         <input
                 type="text"
                 id="lastname"
                 name="lastname"
                 required
-                pattern=""
-                title="">
-      </div>
+                pattern="^[A-Za-z\s'-]{2,}$"
+                title="last name must be more than 2 characters">
+    </div>
 
-      <div class="form-group">
+    <div class="form-group">
         <label for="email">Email</label>
         <input
                 type="email"
                 id="email"
                 name="email"
-                required
-                pattern=""
-                title="">
-      </div>
+                required>
 
-      <div class="form-group">
+    </div>
+
+    <div class="form-group">
         <fieldset>
-          <legend>Choose a shirt color:</legend>
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice1"
-                    name="shirt"
-                    value="blue"
-            >
-            <label for="choice1">Blue</label>
-          </div>
+            <legend>Choose a shirt color:</legend>
+            <div class="form-group-fieldset">
+                <input
+                        type="radio"
+                        id="choice1"
+                        name="shirt"
+                        value="blue"
+                        required>
+                <label for="choice1">Blue</label>
+            </div>
 
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice2"
-                    name="shirt"
-                    value="green"
-            >
-            <label for="choice2">Green</label>
-          </div>
+            <div class="form-group-fieldset">
+                <input
+                        type="radio"
+                        id="choice2"
+                        name="shirt"
+                        value="green"
+                >
+                <label for="choice2">Green</label>
+            </div>
 
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice3"
-                    name="shirt"
-                    value="yellow"
-            >
-            <label for="choice3">Yellow</label>
-          </div>
+            <div class="form-group-fieldset">
+                <input
+                        type="radio"
+                        id="choice3"
+                        name="shirt"
+                        value="yellow"
+                >
+                <label for="choice3">Yellow</label>
+            </div>
         </fieldset>
-      </div>
+    </div>
 
-      <div class="form-group">
+    <div class="form-group">
         <label for="sizing">Choose a size:</label>
-        <select id="sizing" name="size">
-          <option value="">--Please choose an option--</option>
-          <option value="ex-small">XS</option>
-          <option value="small">S</option>
-          <option value="medium">M</option>
-          <option value="large">L</option>
-          <option value="ex-large">XL</option>
-          <option value="ex-ex-large">XXL</option>
+        <select id="sizing" name="size" required>
+            <option value="">--Please choose an option--</option>
+            <option value="ex-small">XS</option>
+            <option value="small">S</option>
+            <option value="medium">M</option>
+            <option value="large">L</option>
+            <option value="ex-large">XL</option>
+            <option value="ex-ex-large">XXL</option>
 
         </select>
-      </div>
-      <button>Submit</button>
-    </form>
-  </div>
-</main>
+    </div>
+    <button type="submit">Submit</button>
+</form>
 
 <footer>
-  <!-- change to your name-->
-  <div class="container">
+    <!-- change to your name-->
     <p>By DAMILOLA ODUMOSU</p>
-  </div>
 </footer>
 </body>
 </html>
 
+
diff --git a/Form-Controls/main.css b/Form-Controls/main.css
new file mode 100644
index 000000000..90f2a167d
--- /dev/null
+++ b/Form-Controls/main.css
@@ -0,0 +1,57 @@
+* {
+    box-sizing: border-box;
+    margin:0;
+}
+header, footer{
+    text-align:center;
+}
+h1{
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
+}
+body{
+    font-family: "Lato", sans-serif;
+    font-size:18px;
+    background-color:#c1121f;
+    color:#fff;
+    line-height: 1.6;
+}
+
+form{
+    width: 50%;
+    background: #780000;
+    padding:45px;
+    margin: 100px auto;
+    border: 2px solid #9a031e;
+    border-radius:5px
+}
+.form-group{
+    margin-bottom:10px;
+}
+label {
+    text-transform: uppercase;
+    margin-right:10px;
+}
+input {
+    background: #fefae0;
+    color: #880d1e;
+    border: 2px solid #f26a8d;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+}
+
+button{
+    cursor: pointer;
+    background-color:#e63946;
+    padding: 1em 1.5em;
+    border: 0;
+    border-radius: 16px;
+}
+p{
+    text-transform:lowercase;
+    font-family: "Pinyon Script", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+

From 1382f1ef85e02cf109e01afde882845490e6c866 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 23 May 2026 20:02:19 +0100
Subject: [PATCH 5/9] Moved changes to correct branch

---
 Form-Controls/main.css | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/Form-Controls/main.css b/Form-Controls/main.css
index 90f2a167d..fe3f5cc65 100644
--- a/Form-Controls/main.css
+++ b/Form-Controls/main.css
@@ -17,15 +17,14 @@ body{
     color:#fff;
     line-height: 1.6;
 }
-
-form{
-    width: 50%;
-    background: #780000;
-    padding:45px;
-    margin: 100px auto;
-    border: 2px solid #9a031e;
-    border-radius:5px
-}
+ form{
+     width: 50%;
+     background: #780000;
+     padding:45px;
+     margin: 100px auto;
+     border: 2px solid #9a031e;
+     border-radius:5px
+ }
 .form-group{
     margin-bottom:10px;
 }

From 6064caa5901edfaacf7906568865defd4ae388c1 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 23 May 2026 20:25:36 +0100
Subject: [PATCH 6/9] Moved changes to correct branch

---
 Form-Controls/index.html |  3 ++-
 Form-Controls/main.css   | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d2312a16d..db65b10c5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -9,7 +9,8 @@
     <link rel="stylesheet" href="main.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+          rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
 </head>
 <body>
diff --git a/Form-Controls/main.css b/Form-Controls/main.css
index fe3f5cc65..0fe70654f 100644
--- a/Form-Controls/main.css
+++ b/Form-Controls/main.css
@@ -17,14 +17,14 @@ body{
     color:#fff;
     line-height: 1.6;
 }
- form{
-     width: 50%;
-     background: #780000;
-     padding:45px;
-     margin: 100px auto;
-     border: 2px solid #9a031e;
-     border-radius:5px
- }
+form{
+    width: 50%;
+    background: #780000;
+    padding:45px;
+    margin: 100px auto;
+    border: 2px solid #9a031e;
+    border-radius:5px
+}
 .form-group{
     margin-bottom:10px;
 }

From f2de985370e236668f08bd820fc18fe1398593f0 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sun, 24 May 2026 12:43:03 +0100
Subject: [PATCH 7/9] feat: fixed pattern attribute error in first and
 lastname.

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index db65b10c5..ee7e92eb5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:>
 <head>
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@@ -37,8 +37,8 @@ <h1>Product Pick</h1>
                 id="firstname"
                 name="firstname"
                 required
-                pattern="^[A-Za-z\s'-]{2,}$"
-                title="first name must be more than 2 characters">
+                pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
+                title="enter a valid name">
     </div>
 
     <div class="form-group">
@@ -48,8 +48,8 @@ <h1>Product Pick</h1>
                 id="lastname"
                 name="lastname"
                 required
-                pattern="^[A-Za-z\s'-]{2,}$"
-                title="last name must be more than 2 characters">
+                pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
+                title="enter a valid name">
     </div>
 
     <div class="form-group">

From 824240b96ebe02fd24911d633b9b72b4cff81541 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sun, 24 May 2026 12:45:28 +0100
Subject: [PATCH 8/9] feat: added a meta content describing the page to the
 head.

---
 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 ee7e92eb5..4024c8650 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <title>My form exercise</title>
-    <meta name="description" content=""/>
+    <meta name="description" content="Product Pick form for selecting name, email, shirt color, and size."/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="main.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">

From aa9ca4d13a5f6a98db2163c34700d4b44fe10af5 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sun, 24 May 2026 12:48:36 +0100
Subject: [PATCH 9/9] feat: added a main tag to improve accessibility.

---
 Form-Controls/index.html | 191 ++++++++++++++++++++-------------------
 1 file changed, 97 insertions(+), 94 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4024c8650..debfa352a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,101 +17,104 @@
 <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-->
-
-    <!--        first and lastname (ensure it contains at least two non-space characters.)-->
-    <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
-    <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
-    <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
-
-
-    <div class="form-group">
-        <label for="firstname">First Name </label>
-        <input
-                type="text"
-                id="firstname"
-                name="firstname"
-                required
-                pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
-                title="enter a valid name">
-    </div>
-
-    <div class="form-group">
-        <label for="lastname">Last Name</label>
-        <input
-                type="text"
-                id="lastname"
-                name="lastname"
-                required
-                pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
-                title="enter a valid name">
-    </div>
-
-    <div class="form-group">
-        <label for="email">Email</label>
-        <input
-                type="email"
-                id="email"
-                name="email"
-                required>
-
-    </div>
-
-    <div class="form-group">
-        <fieldset>
-            <legend>Choose a shirt color:</legend>
-            <div class="form-group-fieldset">
-                <input
-                        type="radio"
-                        id="choice1"
-                        name="shirt"
-                        value="blue"
-                        required>
-                <label for="choice1">Blue</label>
-            </div>
-
-            <div class="form-group-fieldset">
-                <input
-                        type="radio"
-                        id="choice2"
-                        name="shirt"
-                        value="green"
-                >
-                <label for="choice2">Green</label>
-            </div>
-
-            <div class="form-group-fieldset">
-                <input
-                        type="radio"
-                        id="choice3"
-                        name="shirt"
-                        value="yellow"
-                >
-                <label for="choice3">Yellow</label>
-            </div>
-        </fieldset>
-    </div>
-
-    <div class="form-group">
-        <label for="sizing">Choose a size:</label>
-        <select id="sizing" name="size" required>
-            <option value="">--Please choose an option--</option>
-            <option value="ex-small">XS</option>
-            <option value="small">S</option>
-            <option value="medium">M</option>
-            <option value="large">L</option>
-            <option value="ex-large">XL</option>
-            <option value="ex-ex-large">XXL</option>
-
-        </select>
-    </div>
-    <button type="submit">Submit</button>
-</form>
+
+    <form>
+        <!-- write your HTML here-->
+        <!--
+          try writing out the requirements first as comments
+        this will also help you fill in your PR message later-->
+
+        <!--        first and lastname (ensure it contains at least two non-space characters.)-->
+        <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+        <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+        <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+
+
+        <div class="form-group">
+            <label for="firstname">First Name </label>
+            <input
+                    type="text"
+                    id="firstname"
+                    name="firstname"
+                    required
+                    pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
+                    title="enter a valid name">
+        </div>
+
+        <div class="form-group">
+            <label for="lastname">Last Name</label>
+            <input
+                    type="text"
+                    id="lastname"
+                    name="lastname"
+                    required
+                    pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
+                    title="enter a valid name">
+        </div>
+
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required>
+
+        </div>
+
+        <div class="form-group">
+            <fieldset>
+                <legend>Choose a shirt color:</legend>
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice1"
+                            name="shirt"
+                            value="blue"
+                            required>
+                    <label for="choice1">Blue</label>
+                </div>
+
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice2"
+                            name="shirt"
+                            value="green"
+                    >
+                    <label for="choice2">Green</label>
+                </div>
+
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice3"
+                            name="shirt"
+                            value="yellow"
+                    >
+                    <label for="choice3">Yellow</label>
+                </div>
+            </fieldset>
+        </div>
+
+        <div class="form-group">
+            <label for="sizing">Choose a size:</label>
+            <select id="sizing" name="size" required>
+                <option value="">--Please choose an option--</option>
+                <option value="ex-small">XS</option>
+                <option value="small">S</option>
+                <option value="medium">M</option>
+                <option value="large">L</option>
+                <option value="ex-large">XL</option>
+                <option value="ex-ex-large">XXL</option>
+
+            </select>
+        </div>
+        <button type="submit">Submit</button>
+    </form>
+</main>
 
 <footer>
     <!-- change to your name-->