From a91b01a860cea6ea72bec501851548669fef5a61 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Sat, 16 May 2026 15:22:56 +0100
Subject: [PATCH 1/4] Initial version

---
 Form-Controls/index.html | 127 +++++++++++++++++++++++++++++++--------
 1 file changed, 101 insertions(+), 26 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..587cfa1d2 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,102 @@
 <!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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
+<html lang="en" title="Checking Form">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Checking Form</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: hsl(0, 2%, 20%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .customer-form {
+     background-color: #ffffff;
+      padding: 40px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      width: 300px;
+    }
+
+    .customer-form label {
+      margin-bottom: 5px;
+     color: #1a1a1a;              /* dark grey text */
+  background-color: transparent;
+    }
+
+    .customer-form button {
+      width: 100%;
+      padding: 10px;
+   background-color: #0056b3; /* darker blue */
+  color: #ffffff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .custojmer-form button:hover {
+     background-color: #003f8a;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+  <form class="customer-form" title="checking">
+    
+    <H1>Checking Form:</H1>
+
+    <div>
+      <label for="customer-name">Customer's name : </label>
+      <input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
+        title="Please enter at least two non-space characters." />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="customer-email">Customer's email : </label>
+      <input id="customer-email" name="customer-email" type="email" required />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="tshirt-colour">T-shirt Color : </label>
+      <select id="tshirt-colour" name="tshirt-colour" required>
+        <option value="" disabled selected>Select a colour</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+      </select>
+
+    </div>
+    <p></p>
+    <div>
+      <label for="tshirt-size">T-shirt size required : </label>
+      <select id="tshirt-size" name="tshirt-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>
+    <p></p>
+    <button type="submit">Submit checking</button>
+  </form>
+  </main>
+
+</html>
\ No newline at end of file

From 6e5dcb47fd1e9273e95cd3db01aaa5759e084ad3 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Sat, 16 May 2026 15:22:56 +0100
Subject: [PATCH 2/4] final version

---
 Form-Controls/index.html | 127 +++++++++++++++++++++++++++++++--------
 1 file changed, 101 insertions(+), 26 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..d34e6017e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,102 @@
 <!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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
+<html lang="en" title="Checking Forms">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Checking Form</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: hsl(0, 2%, 20%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .customer-form {
+     background-color: #ffffff;
+      padding: 40px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      width: 300px;
+    }
+
+    .customer-form label {
+      margin-bottom: 5px;
+     color: #1a1a1a;              /* dark grey text */
+  background-color: transparent;
+    }
+
+    .customer-form button {
+      width: 100%;
+      padding: 10px;
+   background-color: #0056b3; /* darker blue */
+  color: #ffffff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .custojmer-form button:hover {
+     background-color: #003f8a;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+  <form class="customer-form" title="checking">
+    
+    <H1>Checking Form:</H1>
+
+    <div>
+      <label for="customer-name">Customer's name : </label>
+      <input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
+        title="Please enter at least two non-space characters." />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="customer-email">Customer's email : </label>
+      <input id="customer-email" name="customer-email" type="email" required />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="tshirt-colour">T-shirt Color : </label>
+      <select id="tshirt-colour" name="tshirt-colour" required>
+        <option value="" disabled selected>Select a colour</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+      </select>
+
+    </div>
+    <p></p>
+    <div>
+      <label for="tshirt-size">T-shirt size required : </label>
+      <select id="tshirt-size" name="tshirt-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>
+    <p></p>
+    <button type="submit">Submit checking</button>
+  </form>
+  </main>
+
+</html>
\ No newline at end of file

From 23f810336b2d5fcd607fcd872e4ad5d139ed7779 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 19 May 2026 10:52:26 +0100
Subject: [PATCH 3/4] Final

---
 Form-Controls/index.html | 128 ++++++++++++++++++++++++++++++---------
 1 file changed, 101 insertions(+), 27 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index fff86ab9c..d6ceb7f06 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,101 @@
-<!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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
\ No newline at end of file
+<html lang="en" title="Checking Form">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Checking Form</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: hsl(0, 2%, 20%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .customer-form {
+     background-color: #ffffff;
+      padding: 40px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      width: 300px;
+    }
+
+    .customer-form label {
+      margin-bottom: 5px;
+     color: #1a1a1a;              /* dark grey text */
+  background-color: transparent;
+    }
+
+    .customer-form button {
+      width: 100%;
+      padding: 10px;
+   background-color: #0056b3; /* darker blue */
+  color: #ffffff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .custojmer-form button:hover {
+     background-color: #003f8a;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+  <form class="customer-form" title="checking">
+    
+    <H1>Checking Form:</H1>
+
+    <div>
+      <label for="customer-name">Customer's name : </label>
+      <input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
+        title="Please enter at least two non-space characters." />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="customer-email">Customer's email : </label>
+      <input id="customer-email" name="customer-email" type="email" required />
+
+    </div>
+
+    <p></p>
+
+    <div>
+      <label for="tshirt-colour">T-shirt Color : </label>
+      <select id="tshirt-colour" name="tshirt-colour" required>
+        <option value="" disabled selected>Select a colour</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+      </select>
+
+    </div>
+    <p></p>
+    <div>
+      <label for="tshirt-size">T-shirt size required : </label>
+      <select id="tshirt-size" name="tshirt-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>
+    <p></p>
+    <button type="submit">Submit checking</button>
+  </form>
+  </main>
+</body>
+</html>

From cb879f777a039d8309bf3ed4107f68be04c53bc3 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 20 May 2026 15:13:18 +0100
Subject: [PATCH 4/4] Revised on 20 May 2026 for the comments

---
 Form-Controls/index.html | 139 ++++++++++++++-------------------------
 1 file changed, 50 insertions(+), 89 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d6ceb7f06..e00baac36 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,101 +1,62 @@
+<!DOCTYPE html>
 <html lang="en" title="Checking Form">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Checking Form</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      background-color: hsl(0, 2%, 20%);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      margin: 0;
-    }
-
-    .customer-form {
-     background-color: #ffffff;
-      padding: 40px;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-      width: 300px;
-    }
-
-    .customer-form label {
-      margin-bottom: 5px;
-     color: #1a1a1a;              /* dark grey text */
-  background-color: transparent;
-    }
-
-    .customer-form button {
-      width: 100%;
-      padding: 10px;
-   background-color: #0056b3; /* darker blue */
-  color: #ffffff;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 16px;
-    }
-
-    .custojmer-form button:hover {
-     background-color: #003f8a;
-    }
-  </style>
 </head>
 
 <body>
   <main>
-  <form class="customer-form" title="checking">
-    
-    <H1>Checking Form:</H1>
-
-    <div>
-      <label for="customer-name">Customer's name : </label>
-      <input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
-        title="Please enter at least two non-space characters." />
-
-    </div>
-
-    <p></p>
-
-    <div>
-      <label for="customer-email">Customer's email : </label>
-      <input id="customer-email" name="customer-email" type="email" required />
-
-    </div>
-
-    <p></p>
-
-    <div>
-      <label for="tshirt-colour">T-shirt Color : </label>
-      <select id="tshirt-colour" name="tshirt-colour" required>
-        <option value="" disabled selected>Select a colour</option>
-        <option value="red">Red</option>
-        <option value="blue">Blue</option>
-        <option value="black">Black</option>
-      </select>
-
-    </div>
-    <p></p>
-    <div>
-      <label for="tshirt-size">T-shirt size required : </label>
-      <select id="tshirt-size" name="tshirt-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>
-    <p></p>
-    <button type="submit">Submit checking</button>
-  </form>
+    <form class="customer-form" title="checking">
+
+      <H1>Checking Form:</H1>
+
+      <div>
+        <label for="customer-name">Customer's name : </label>
+        <input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
+          title="Please enter at least two non-space characters." />
+      </div>
+      <br>
+
+      <div>
+        <label for="customer-email">Customer's email : </label>
+        <input id="customer-email" name="customer-email" type="email" required />
+
+      </div>
+      <br>
+
+      <div>
+        <label for="tshirt-colour">T-shirt Color : </label>
+        <select id="tshirt-colour" name="tshirt-colour" required>
+          <option value="" disabled selected>Select a colour</option>
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="black">Black</option>
+        </select>
+      </div>
+      <br>
+      <div>
+        <label for="tshirt-size">T-shirt size required : </label>
+        <select id="tshirt-size" name="tshirt-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>
+      <br>
+      <button type="submit">Submit checking</button>
+    </form>
   </main>
+  <footer>
+    <p>By ChunyanWong HOMEWORK SOLUTION</p>
+  </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file
