Restructure form elements and fix label typos in index.html

Author: Taha-Elmahmoudi

Form-Controls/index.html

@@ -19,17 +19,32 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
-
+<fieldset>
+  <legend>Customer Details</legend>
         <p>
-<label for="name">Name</label>
-        <input pattern="`.*\S.*\S.*`" type="text" for="name" id="name"> 
+           <label for="name">Name</label>
+           <input pattern="`.*\S.*\S.*`" type="text" for="name" id="name"> 
         </p>
-
 
         <p>
-        <lable>Email</lable>
-        <input type="email" for="email" id="email"> 
-</p>
+          <lable>Email</lable>
+          <input type="email" for="email" id="email"> 
+        </p>   
+</fieldset>
+
+<fieldset>
+<legend>Choose a Color</legend>
+  <lable >Red</lable>
+  <input type="radio" id="Red" name="color" value="red" required>
+
+  <lable >white</lable>
+  <input type="radio" id="white" name="color" value="white" required>
+
+  <lable >Black</lable>
+  <input type="radio" id="black" name="color" value="black" required>
+
+</fieldset>
+        
 
 
 <button>Submit</button>