From 861df346b276d46838824135c18df568e500a1a3 Mon Sep 17 00:00:00 2001
From: Valent Pron <valentynschaposchnik@gmail.com>
Date: Thu, 5 Jun 2025 17:16:15 +0100
Subject: [PATCH] form done

---
 Form-Controls/index.html  | 85 +++++++++++++++++++++++++++++++++++----
 Form-Controls/submit.html | 19 +++++++++
 2 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 Form-Controls/submit.html
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..1390e3193 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,87 @@
       <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-->
+      <h2>Confirm Your Identity</h2>
+      <form id="order-form" action="submit.html" method="get">
+        <div>
+          <label for="name"
+            >Full Name:<span aria-label="required">*</span></label
+          >
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            minlength="2"
+            pattern="^[A-Za-z\s'-]{2,50}$"
+            title="Please enter a valid name (letters, spaces, hyphens, and apostrophes only)"
+            placeholder="Your full name"
+            autocomplete="name"
+          />
+        </div>
+
+        <div>
+          <label for="email"
+            >Email address:<span aria-label="required">*</span></label
+          >
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$"
+            title="Please enter a valid email address"
+            placeholder="you@example.com"
+            autocomplete="email"
+          />
+        </div>
+
+        <h2>Select Your T-Shirt Options</h2>
+
+        <div>
+          <label for="color">Colour:</label>
+          <select id="color" name="color" required>
+            <option value="" disabled selected>Select colour</option>
+            <option value="white">White</option>
+            <option value="black">Black</option>
+            <option value="red">Red</option>
+          </select>
+        </div>
+
+        <div>
+          <label for="size">Size:</label>
+          <select id="size" name="size" multiple required>
+            <option value="" disabled selected>Select size</option>
+            <option value="S">Extra Small (XS)</option>
+            <option value="S">Small (S)</option>
+            <option value="M">Medium (M)</option>
+            <option value="L">Large (L)</option>
+            <option value="XL">Extra Large (XL)</option>
+            <option value="XXL">Double Extra Large (XXL)</option>
+          </select>
+        </div>
+        <div>
+          <label for="male">Male</label>
+          <input type="radio" name="gender" id="male" value="male" />
+        </div>
+        <div>
+          <label for="female">Female</label>
+          <input type="radio" name="gender" id="female" value="female" />
+        </div>
+        <div>
+          <label for="specialRequest">Special Request</label>
+          <textarea
+            name="specialRequest"
+            id="specialRequest"
+            placeholder="write your request here and we will contact you"
+          ></textarea>
+        </div>
+        <button type="reset">Reset</button>
+        <button type="submit">Place Order</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h3>By Valentyn Pronchenko</h3>
     </footer>
   </body>
 </html>
diff --git a/Form-Controls/submit.html b/Form-Controls/submit.html
new file mode 100644
index 000000000..b4f582827
--- /dev/null
+++ b/Form-Controls/submit.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Submit</title>
+  </head>
+  <body>
+    <div id="submit"></div>
+    <a href="/Form-Controls/">Back to Form</a>
+    <script>
+      const submitList = document.getElementById("submit");
+      new URLSearchParams(window.location.search).forEach((value, name) => {
+        submitList.append(`${name}: ${value}`);
+        submitList.append(document.createElement("br"));
+      });
+    </script>
+  </body>
+</html>
