Update form inputs and labels for customer details

Author: gideondefar

Form-Controls/index.html

@@ -18,32 +18,38 @@ <h1>Product Pick</h1>
       <!-- Customer Name Input -->
       <p> 
         <label for="customerName">Name:</label>
-        <input type="text" id="customerName" name="customerName" required minlength="2"
-         pattern=".*\S.*" placeholder="Enter your full name"> 
+        <input type="text" id="customerName" name="customerName" required minlength="3"
+         pattern=".*\S.*\S.*" placeholder="Enter your full name">
       </p>
 
       <!-- Customer Email Input -->
       <p>
         <label for="emailAddress">Email:</label>
-        <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com"
-          pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$"
-          title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
+        <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@gmail.com"
+          pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
+          title="Please enter a valid email address (e.g., user@gmail.com). Domain parts (like 'gmail') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
       </p>
 
       <!-- T-Shirt Colour Selection -->
       <fieldset>
         <legend>Choose T-Shirt Colour:</legend>
         <p>
-          <input type="radio" id="colourRed" name="shirtColour" value="red" required>
-          <label for="colourRed">Red</label>
+          <label>
+            <input type="radio" name="shirt-colour" value="red" required>
+            Red
+          </label>
         </p>
-        <p>
-          <input type="radio" id="colourBlue" name="shirtColour" value="blue">
-          <label for="colourBlue">Blue</label>
+                <p>
+          <label>
+            <input type="radio" name="shirt-colour" value="blue" required>
+            Blue
+          </label>
         </p>
-        <p>
-          <input type="radio" id="colourGreen" name="shirtColour" value="green">
-          <label for="colourGreen">Green</label>
+                <p>
+          <label>
+            <input type="radio" name="shirt-colour" value="green" required>
+            Green
+          </label>
         </p>
       </fieldset>
 
@@ -72,4 +78,4 @@ <h2>By Gideon Defar</h2>
   </footer>
 </body>
 
-</html>
+</html>