From f0f6330076b0e3b3372b089b7d34b05ea0fdc35e Mon Sep 17 00:00:00 2001
From: Rawan Almutairi <almutairi.rawan01@gmail.com>
Date: Tue, 29 Sep 2026 00:42:49 +0100
Subject: [PATCH] created forms and styled them

---
 Form-Controls/index.html | 62 ++++++++++++++++++++++++++++++++++++----
 Form-Controls/style.css  | 17 +++++++++++
 2 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..ce676ea05 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,64 @@ <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-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+</label>
+<datalist id="SizeList">
+
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+        
+</datalist>
+
       </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form> <label> <input type="submit"> <input type="resit">
+  </label>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>
     </footer>
   </body>
-</html>
+</html> 
\ No newline at end of file
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..9b733c991
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,17 @@
+body { color: #141414; 
+  
+    background-color: #6aa57e; 
+
+     font-family: Georgia; 
+     
+    
+
+h1{
+
+font-family: sans-serif;
+color:  rgba(15, 15, 15, 0.267); 
+background-color: #f5eeda;  
+text-align: center;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}
\ No newline at end of file