Add title attributes to form fields for better validation messages

- Add title to Customer Name field explaining the 2-character requirement
- Add title to Email field for clarity
- Add title attributes to Colour and Size select fields
- Improves UX by showing users what format is expected when validation fails

Fixes feedback from cjyuan

Author: huangwtings-hub

Form-Controls/index.html

@@ -22,6 +22,7 @@ <h1>T-Shirt Order Form</h1>
           id="name"
           name="name"
           pattern=".*\S.*\S.*"
+          title="Please enter at least 2 characters (name must contain at least 2 non-space characters)"
           required
         >
       </div>
@@ -33,14 +34,15 @@ <h1>T-Shirt Order Form</h1>
           type="email"
           id="email"
           name="email"
+          title="Please enter a valid email address (e.g., name@example.com)"
           required
         >
       </div>
 
       <!-- Colour -->
       <div>
         <label for="colour">Choose a Colour</label>
-        <select id="colour" name="colour" required>
+        <select id="colour" name="colour" title="Please select a colour from the list" required>
           <option value="">Select a colour</option>
           <option value="black">Black</option>
           <option value="white">White</option>
@@ -51,7 +53,7 @@ <h1>T-Shirt Order Form</h1>
       <!-- Size -->
       <div>
         <label for="size">Choose a Size</label>
-        <select id="size" name="size" required>
+        <select id="size" name="size" title="Please select a size from the list" required>
           <option value="">Select a size</option>
           <option value="XS">XS</option>
           <option value="S">S</option>