From b795ceabcce647b702888df152dd58b105badbff Mon Sep 17 00:00:00 2001
From: chaitra <chaitra.a.shettys@gmail.com>
Date: Sun, 3 Nov 2024 07:30:43 +0000
Subject: [PATCH 1/4] Write the requirements for the html form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..eba9fe05 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,12 +16,21 @@ <h1>Product Pick</h1>
   <form>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+     
+     <!-- make sure to take valid input for customer name and email id,
+          let the customer choose any one t-shirt colour by using drop down box,
+          select t-shirt size by using radio button and select delivery date by using 
+          date input box and make sure delivery date is within the next 4 weeks of current date.
+     -->
+
+  
+
   </form>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2> &copy; 2024 Chaitra's Tech Guide. All rights reserved.</h2>
   </footer>
 </body>
 

From 903c2a409970d68f2a0e9c1d48fa00e5c774d74b Mon Sep 17 00:00:00 2001
From: chaitra <chaitra.a.shettys@gmail.com>
Date: Sun, 3 Nov 2024 07:58:55 +0000
Subject: [PATCH 2/4] Adds a valid form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index eba9fe05..bbf73443 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,15 +16,66 @@ <h1>Product Pick</h1>
   <form>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
-     
+
      <!-- make sure to take valid input for customer name and email id,
           let the customer choose any one t-shirt colour by using drop down box,
           select t-shirt size by using radio button and select delivery date by using 
           date input box and make sure delivery date is within the next 4 weeks of current date.
      -->
 
+    <div>
+      <label for="name">Customer Name</label>
+      <input type="text" name="name" id="name" required minlength="3" maxlength="40" >
+    </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" required>
+    </div>
+    <div>
+      <label for="tshirtColor">T-shirt Color</label>
+      <select name="tshirtColor" id="tshirtColor" required>
+        <option value="Black">Black</option>
+        <option value="White">White</option>
+        <option label="Red">Red</option>
+      </select>
+    </div>
+    <div>
+      T-shirt Size
+      <div>
+        <label for="XS">XS</label>
+        <input type="radio" name="tshirtSize" id="XS" value="XS" required>
+      
+        <label for="S">S</label>
+        <input type="radio" name="tshirtSize" id="S" value="S">
+      
+      
+        <label for="M">M</label>
+        <input type="radio" name="tshirtSize" id="M" value="M">
+      
+      
+        <label for="L">L</label>
+        <input type="radio" name="tshirtSize" id="L" value="L">
+    
+    
+        <label for="XL">XL</label>
+        <input type="radio" name="tshirtSize" id="XL" value="XL">
+    
+     
+        <label for="XXL">XXL</label>
+        <input type="radio" name="tshirtSize" id="XXL" value="XXL">
+      </div>
+    </div>
   
+    <div>
+      <label for="date">DeliveryDate</label>
+      <input type="date" name="date" id="date" min="2024-11-03" max="2024-11-30" required>
+    </div>
 
+    <div>
+      <button type="reset">Reset</button>
+      <button type="submit">Submit</button>
+    </div>
+    
   </form>
 
   </main>

From 0903eb3e562c57f42296a85cd731ad195ffa31c4 Mon Sep 17 00:00:00 2001
From: chaitra <chaitra.a.shettys@gmail.com>
Date: Sun, 3 Nov 2024 08:32:43 +0000
Subject: [PATCH 3/4]  add CSS styling to form controls (inputs and buttons)

---
 Form-Controls/index.html | 162 ++++++++++++++++++++-------------------
 Form-Controls/styles.css |  60 +++++++++++++++
 2 files changed, 145 insertions(+), 77 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index bbf73443..e04dc045 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,88 +1,96 @@
 <!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="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
+  <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="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
 
-     <!-- make sure to take valid input for customer name and email id,
+    <main>
+      <form>
+        <!-- write your html here-->
+        <!-- try writing out the requirements first-->
+
+        <!-- make sure to take valid input for customer name and email id,
           let the customer choose any one t-shirt colour by using drop down box,
           select t-shirt size by using radio button and select delivery date by using 
           date input box and make sure delivery date is within the next 4 weeks of current date.
      -->
 
-    <div>
-      <label for="name">Customer Name</label>
-      <input type="text" name="name" id="name" required minlength="3" maxlength="40" >
-    </div>
-    <div>
-      <label for="email">Email</label>
-      <input type="email" name="email" id="email" required>
-    </div>
-    <div>
-      <label for="tshirtColor">T-shirt Color</label>
-      <select name="tshirtColor" id="tshirtColor" required>
-        <option value="Black">Black</option>
-        <option value="White">White</option>
-        <option label="Red">Red</option>
-      </select>
-    </div>
-    <div>
-      T-shirt Size
-      <div>
-        <label for="XS">XS</label>
-        <input type="radio" name="tshirtSize" id="XS" value="XS" required>
-      
-        <label for="S">S</label>
-        <input type="radio" name="tshirtSize" id="S" value="S">
-      
-      
-        <label for="M">M</label>
-        <input type="radio" name="tshirtSize" id="M" value="M">
-      
-      
-        <label for="L">L</label>
-        <input type="radio" name="tshirtSize" id="L" value="L">
-    
-    
-        <label for="XL">XL</label>
-        <input type="radio" name="tshirtSize" id="XL" value="XL">
-    
-     
-        <label for="XXL">XXL</label>
-        <input type="radio" name="tshirtSize" id="XXL" value="XXL">
-      </div>
-    </div>
-  
-    <div>
-      <label for="date">DeliveryDate</label>
-      <input type="date" name="date" id="date" min="2024-11-03" max="2024-11-30" required>
-    </div>
+        <div class="input">
+          <label for="name">Customer Name</label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            required
+            minlength="3"
+            maxlength="40"
+          />
+        </div>
+        <div class="input">
+          <label for="email">Email</label>
+          <input type="email" name="email" id="email" required />
+        </div>
+        <div class="input">
+          <label for="tshirtColor">T-shirt Color</label>
+          <select name="tshirtColor" id="tshirtColor" required>
+            <option value="Black">Black</option>
+            <option value="White">White</option>
+            <option label="Red">Red</option>
+          </select>
+        </div>
+        <div class="tshirtSize" class="input">
+          T-shirt Size
+          <div class="input">
+            <label for="XS">XS</label>
+            <input type="radio" name="tshirtSize" id="XS" value="XS" required />
+
+            <label for="S">S</label>
+            <input type="radio" name="tshirtSize" id="S" value="S" />
+
+            <label for="M">M</label>
+            <input type="radio" name="tshirtSize" id="M" value="M" />
+
+            <label for="L">L</label>
+            <input type="radio" name="tshirtSize" id="L" value="L" />
+
+            <label for="XL">XL</label>
+            <input type="radio" name="tshirtSize" id="XL" value="XL" />
 
-    <div>
-      <button type="reset">Reset</button>
-      <button type="submit">Submit</button>
-    </div>
-    
-  </form>
+            <label for="XXL">XXL</label>
+            <input type="radio" name="tshirtSize" id="XXL" value="XXL" />
+          </div>
+        </div>
 
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2> &copy; 2024 Chaitra's Tech Guide. All rights reserved.</h2>
-  </footer>
-</body>
+        <div class="input">
+          <label for="date">DeliveryDate</label>
+          <input
+            type="date"
+            name="date"
+            id="date"
+            min="2024-11-03"
+            max="2024-11-30"
+            required
+          />
+        </div>
 
-</html>
\ No newline at end of file
+        <div class="input">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <h2>&copy; 2024 Chaitra's Tech Guide. All rights reserved.</h2>
+    </footer>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..cd1464e5 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,60 @@
+body {
+  background-color: #4070f4;
+}
+
+header {
+  text-align: center;
+  color: burlywood;
+  font-family: "Courier New", Courier, monospace;
+  font-size: larger;
+}
+
+.tshirtSize input {
+  width: 15px;
+}
+
+main {
+  background-color: #fff;
+  width: 500px;
+  height: 500px;
+  margin: 45px auto;
+}
+
+.input {
+  padding: 10px;
+}
+
+form {
+  margin-left: 20px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+input {
+  width: 240px;
+  height: 10px;
+  margin: 10px;
+  background-color: lavender;
+  border: 0px;
+  padding: 10px;
+  font-size: 20px;
+}
+
+button {
+  width: 200px;
+  height: 50px;
+  background-color: darkblue;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+footer {
+  text-align: center;
+  color: black;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: cadetblue;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}

From 5a28920f7c111206809dc5a9a85c0cf551599b20 Mon Sep 17 00:00:00 2001
From: chaitra <chaitra.a.shettys@gmail.com>
Date: Thu, 7 Nov 2024 12:28:34 +0000
Subject: [PATCH 4/4] Adds styles when element is focused

---
 Form-Controls/index.html | 40 +++++++++++++++++++++++++---------------
 Form-Controls/styles.css | 16 ++++++++++++++++
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index e04dc045..1502984e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -24,29 +24,39 @@ <h1>Product Pick</h1>
           date input box and make sure delivery date is within the next 4 weeks of current date.
      -->
 
-        <div class="input">
-          <label for="name">Customer Name</label>
-          <input
-            type="text"
-            name="name"
-            id="name"
-            required
-            minlength="3"
-            maxlength="40"
-          />
-        </div>
-        <div class="input">
-          <label for="email">Email</label>
-          <input type="email" name="email" id="email" required />
-        </div>
+     <div class="input">
+      <label for="name">Customer Name</label>
+      <input
+        type="text"
+        name="name"
+        id="name"
+        required
+        
+        placeholder="Enter your full name"
+      />
+    </div>
+    
+    <div class="input">
+      <label for="email">Email</label>
+      <input
+        type="email"
+        name="email"
+        id="email"
+        required
+        placeholder="Enter your email"
+      />
+    </div>
+    
         <div class="input">
           <label for="tshirtColor">T-shirt Color</label>
           <select name="tshirtColor" id="tshirtColor" required>
+            <option value="" disabled selected>Select a color</option>
             <option value="Black">Black</option>
             <option value="White">White</option>
             <option label="Red">Red</option>
           </select>
         </div>
+        
         <div class="tshirtSize" class="input">
           T-shirt Size
           <div class="input">
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index cd1464e5..011c3b6c 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -58,3 +58,19 @@ footer {
   bottom: 0;
   width: 100%;
 }
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+select:focus,
+input[type="radio"]:focus,
+input[type="date"]:focus {
+  outline: 2px solid #005fcc;  
+  border: 2px solid #005fcc;  
+  background-color: #f0f8ff;   
+}
+
+button:focus {
+  outline: 2px solid #005fcc;  
+
+  background-color: rgb(228, 132, 6);
+}
\ No newline at end of file