From 19fabafee40f4b19315b5654b7437dbdcdf6a48e Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Sat, 24 Jan 2026 14:14:31 +0000
Subject: [PATCH 1/7] Completed form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..93e6f5431 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,65 @@
       <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>
+  <p>Please complete all required (*) fields.</p>
+  <p>
+    <label>What's your name?*</label>
+    <input 
+    type="text"
+    name="name"
+    placeholder="Enter your name"
+    required
+    minlength="3"
+    maxlength="30"
+    pattern="[A-Za-z ]+"
+  />
+  </p>
+    <p>
+    <label>What's your email address?*</label>
+    <input type="email"
+    name="email"
+    required
+    placeholder="Enter your email"
+    />
+  </p>
+  <p>
+    <label>Pick your color*</label>
+    <input type="text"
+    name="color"
+    required
+    list="c1"
+    />
+    <datalist id="c1">
+      <option>Yellow</option>
+      <option>Blue</option>
+      <option>White</option>
+    </datalist>
+  </p>
+  <p>
+    <label>Pick your size*</label>
+    <input
+      type="text"
+      id="t1"
+      list="l1"
+      required
+      pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range" />
+    <datalist id="l1">
+      <option>XS</option>
+      <option>S</option>
+      <option>M</option>
+      <option>L</option>
+      <option>XL</option>
+      <option>XXL</option>
+    </datalist>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Ihor Taradaiko</h2>
     </footer>
   </body>
 </html>

From 4afcffecd9e1d8ce0952a35b979ee40b9ab814d3 Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Sat, 24 Jan 2026 14:36:51 +0000
Subject: [PATCH 2/7] editied form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 93e6f5431..771f956be 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -15,7 +15,7 @@ <h1>Product Pick</h1>
 <form>
   <p>Please complete all required (*) fields.</p>
   <p>
-    <label>What's your name?*</label>
+    <label for="r1">What's your name?*</label>
     <input 
     type="text"
     name="name"
@@ -27,7 +27,7 @@ <h1>Product Pick</h1>
   />
   </p>
     <p>
-    <label>What's your email address?*</label>
+    <label for="r2">What's your email address?*</label>
     <input type="email"
     name="email"
     required
@@ -35,9 +35,10 @@ <h1>Product Pick</h1>
     />
   </p>
   <p>
-    <label>Pick your color*</label>
+    <label for="r3">Pick your color*</label>
     <input type="text"
     name="color"
+    placeholder="Color"
     required
     list="c1"
     />
@@ -48,11 +49,12 @@ <h1>Product Pick</h1>
     </datalist>
   </p>
   <p>
-    <label>Pick your size*</label>
+    <label for="r4">Pick your size*</label>
     <input
       type="text"
       id="t1"
       list="l1"
+      placeholder="Size"
       required
       pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range" />
     <datalist id="l1">

From f3f0745fbfb6e65882b61a79e1ba570c9127ea78 Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Thu, 5 Feb 2026 10:48:22 +0000
Subject: [PATCH 3/7] Found errors in code and fixed / changed id&class values

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 771f956be..8dcde0793 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,63 +1,60 @@
-<!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>
   <p>Please complete all required (*) fields.</p>
-  <p>
-    <label for="r1">What's your name?*</label>
+
+  <p class="form-field">
+    <label for="name">What's your name?*</label>
     <input 
-    type="text"
-    name="name"
-    placeholder="Enter your name"
-    required
-    minlength="3"
-    maxlength="30"
-    pattern="[A-Za-z ]+"
-  />
+      type="text"
+      id="name"
+      name="name"
+      placeholder="Enter your name"
+      required
+      minlength="3"
+      maxlength="30"
+      pattern="[A-Za-z ]+"
+    />
   </p>
-    <p>
-    <label for="r2">What's your email address?*</label>
-    <input type="email"
-    name="email"
-    required
-    placeholder="Enter your email"
+
+  <p class="form-field">
+    <label for="email">What's your email address?*</label>
+    <input
+      type="email"
+      id="email"
+      name="email"
+      placeholder="Enter your email"
+      required
     />
   </p>
-  <p>
-    <label for="r3">Pick your color*</label>
-    <input type="text"
-    name="color"
-    placeholder="Color"
-    required
-    list="c1"
+
+  <p class="form-field">
+    <label for="color">Pick your color*</label>
+    <input
+      type="text"
+      id="color"
+      name="color"
+      placeholder="Color"
+      list="color-options"
+      required
     />
-    <datalist id="c1">
+    <datalist id="color-options">
       <option>Yellow</option>
       <option>Blue</option>
       <option>White</option>
     </datalist>
   </p>
-  <p>
-    <label for="r4">Pick your size*</label>
+
+  <p class="form-field">
+    <label for="size">Pick your size*</label>
     <input
       type="text"
-      id="t1"
-      list="l1"
+      id="size"
+      name="size"
       placeholder="Size"
+      list="size-options"
+      pattern="XS|S|M|L|XL|XXL"
       required
-      pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range" />
-    <datalist id="l1">
+    />
+    <datalist id="size-options">
       <option>XS</option>
       <option>S</option>
       <option>M</option>
@@ -66,13 +63,8 @@ <h1>Product Pick</h1>
       <option>XXL</option>
     </datalist>
   </p>
+
   <p>
-    <button>Submit</button>
+    <button type="submit">Submit</button>
   </p>
 </form>
-    </main>
-    <footer>
-      <h2>By Ihor Taradaiko</h2>
-    </footer>
-  </body>
-</html>

From a3fd56accd8f9d1b1815bc75c823ca70d83e3fcd Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Thu, 5 Feb 2026 10:50:15 +0000
Subject: [PATCH 4/7] Changed pattern for "name"

---
 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 8dcde0793..cef1796b1 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -11,7 +11,7 @@
       required
       minlength="3"
       maxlength="30"
-      pattern="[A-Za-z ]+"
+      pattern=".*[A-Za-z].*"
     />
   </p>
 

From cc8501abb9f54d53ca4ab3ae78687b763abe503a Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Thu, 5 Feb 2026 10:52:13 +0000
Subject: [PATCH 5/7] added pattern to "color"

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index cef1796b1..8cde5849f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -34,6 +34,7 @@
       name="color"
       placeholder="Color"
       list="color-options"
+      pattern="Yellow|Blue|White"
       required
     />
     <datalist id="color-options">

From bf06264aa6b1808b9f0ed362b7704e8c617462c8 Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Thu, 5 Feb 2026 10:54:30 +0000
Subject: [PATCH 6/7] Beautified

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 8cde5849f..e0c484557 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,40 +3,19 @@
 
   <p class="form-field">
     <label for="name">What's your name?*</label>
-    <input 
-      type="text"
-      id="name"
-      name="name"
-      placeholder="Enter your name"
-      required
-      minlength="3"
-      maxlength="30"
-      pattern=".*[A-Za-z].*"
-    />
+    <input type="text" id="name" name="name" placeholder="Enter your name" required minlength="3" maxlength="30"
+      pattern=".*[A-Za-z].*" />
   </p>
 
   <p class="form-field">
     <label for="email">What's your email address?*</label>
-    <input
-      type="email"
-      id="email"
-      name="email"
-      placeholder="Enter your email"
-      required
-    />
+    <input type="email" id="email" name="email" placeholder="Enter your email" required />
   </p>
 
   <p class="form-field">
     <label for="color">Pick your color*</label>
-    <input
-      type="text"
-      id="color"
-      name="color"
-      placeholder="Color"
-      list="color-options"
-      pattern="Yellow|Blue|White"
-      required
-    />
+    <input type="text" id="color" name="color" placeholder="Color" list="color-options" pattern="Yellow|Blue|White"
+      required />
     <datalist id="color-options">
       <option>Yellow</option>
       <option>Blue</option>
@@ -46,15 +25,8 @@
 
   <p class="form-field">
     <label for="size">Pick your size*</label>
-    <input
-      type="text"
-      id="size"
-      name="size"
-      placeholder="Size"
-      list="size-options"
-      pattern="XS|S|M|L|XL|XXL"
-      required
-    />
+    <input type="text" id="size" name="size" placeholder="Size" list="size-options" pattern="XS|S|M|L|XL|XXL"
+      required />
     <datalist id="size-options">
       <option>XS</option>
       <option>S</option>
@@ -68,4 +40,4 @@
   <p>
     <button type="submit">Submit</button>
   </p>
-</form>
+</form>
\ No newline at end of file

From 2ce19c935337562f8642ce4766094d6c6171bb24 Mon Sep 17 00:00:00 2001
From: Ihor Taradaiko <igor.taradaiko@gmail.com>
Date: Thu, 5 Feb 2026 18:58:16 +0000
Subject: [PATCH 7/7] Changes to code ( added doctype, title / fixed forms
 using <select>)

---
 Form-Controls/index.html | 99 +++++++++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 38 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e0c484557..053e6c9a7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,43 +1,66 @@
-<form>
-  <p>Please complete all required (*) fields.</p>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Form Example</title>
+  </head>
 
-  <p class="form-field">
-    <label for="name">What's your name?*</label>
-    <input type="text" id="name" name="name" placeholder="Enter your name" required minlength="3" maxlength="30"
-      pattern=".*[A-Za-z].*" />
-  </p>
+  <body>
+    <form>
+      <p>Please complete all required (*) fields.</p>
 
-  <p class="form-field">
-    <label for="email">What's your email address?*</label>
-    <input type="email" id="email" name="email" placeholder="Enter your email" required />
-  </p>
+      <p class="form-field">
+        <label for="name">What's your name? *</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          placeholder="Enter your name"
+          required
+          minlength="3"
+          maxlength="30"
+          pattern=".*[A-Za-z].*"
+        />
+      </p>
 
-  <p class="form-field">
-    <label for="color">Pick your color*</label>
-    <input type="text" id="color" name="color" placeholder="Color" list="color-options" pattern="Yellow|Blue|White"
-      required />
-    <datalist id="color-options">
-      <option>Yellow</option>
-      <option>Blue</option>
-      <option>White</option>
-    </datalist>
-  </p>
+      <p class="form-field">
+        <label for="email">What's your email address? *</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          placeholder="Enter your email"
+          required
+        />
+      </p>
 
-  <p class="form-field">
-    <label for="size">Pick your size*</label>
-    <input type="text" id="size" name="size" placeholder="Size" list="size-options" pattern="XS|S|M|L|XL|XXL"
-      required />
-    <datalist id="size-options">
-      <option>XS</option>
-      <option>S</option>
-      <option>M</option>
-      <option>L</option>
-      <option>XL</option>
-      <option>XXL</option>
-    </datalist>
-  </p>
+      <p class="form-field">
+        <label for="color">Pick your color *</label>
+        <select id="color" name="color" required>
+          <option value="">-- Select a color --</option>
+          <option value="Yellow">Yellow</option>
+          <option value="Blue">Blue</option>
+          <option value="White">White</option>
+        </select>
+      </p>
 
-  <p>
-    <button type="submit">Submit</button>
-  </p>
-</form>
\ No newline at end of file
+      <p class="form-field">
+        <label for="size">Pick your size *</label>
+        <select id="size" name="size" required>
+          <option value="">-- 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>
+      </p>
+
+      <p>
+        <button type="submit">Submit</button>
+      </p>
+    </form>
+  </body>
+</html>