fix form elements

Author: mandipsanger

Form-Controls/index.html

@@ -15,20 +15,20 @@ <h1>Product Pick</h1>
       </header>
       <main>
         <form>
-          <div>
+          <fieldset>
+            <legend>Personal Information</legend>
             <label for="name">Name:</label>
             <input
               type="text"
               id="name"
               name="name"
               pattern="^\s*(\S\s*){2,}$"
+              required
+              title="Please enter at least 2 characters"
             />
-          </div>
-
-          <div>
             <label for="email">Email:</label>
-            <input type="email" id="email" name="email" />
-          </div>
+            <input type="email" id="email" name="email" required />
+          </fieldset>
 
           <fieldset>
             <legend>Please select your color</legend>
@@ -43,17 +43,18 @@ <h1>Product Pick</h1>
             <label for="red">Red</label>
           </fieldset>
 
-          <div>
-            <p>Please select a size</p>
+          <fieldset>
+            <legend>Please select a size</legend>
 
             <label for="size">Choose a size:</label>
-            <select name="size" id="size">
+            <select name="size" id="size" required>
+              <option value="">-- Please choose an option --</option>
               <option value="xs">Extra Small</option>
               <option value="small">Small</option>
               <option value="medium">Medium</option>
               <option value="large">Large</option>
             </select>
-          </div>
+          </fieldset>
 
           <input type="submit" value="Submit" />
         </form>