Simplify form labels

Author: BrianY315

Form-Controls/index.html

@@ -16,58 +16,62 @@ <h1>Product Pick</h1>
     <main>
       <form aria-label="T-shirt order form">
         <div class="form-group">
-          <label for="customer-name">Name</label>
-          <input
-            id="customer-name"
-            name="customer-name"
-            type="text"
-            pattern=".*\S.*\S.*"
-            title="Please enter at least two non-space characters."
-            required
-          />
+          <label>
+            Name
+            <input
+              name="customer-name"
+              type="text"
+              pattern=".*\S.*\S.*"
+              title="Please enter at least two non-space characters."
+              required
+            />
+          </label>
         </div>
 
         <div class="form-group">
-          <label for="customer-email">Email</label>
-          <input
-            id="customer-email"
-            name="customer-email"
-            type="email"
-            required
-          />
+          <label>
+            Email
+            <input
+              name="customer-email"
+              type="email"
+              required
+            />
+          </label>
         </div>
 
         <fieldset class="form-group">
           <legend>Choose a colour</legend>
           <div class="radio-group">
-            <label class="option" for="tshirt-colour-red">
-              <input id="tshirt-colour-red" name="tshirt-colour" type="radio" value="red" required />
+            <label class="option">
+              <input name="tshirt-colour" type="radio" value="red" required />
               <span>Red</span>
             </label>
 
-            <label class="option" for="tshirt-colour-blue">
-              <input id="tshirt-colour-blue" name="tshirt-colour" type="radio" value="blue" />
+            <label class="option">
+              <input name="tshirt-colour" type="radio" value="blue" />
               <span>Blue</span>
             </label>
 
-            <label class="option" for="tshirt-colour-black">
-              <input id="tshirt-colour-black" name="tshirt-colour" type="radio" value="black" />
+            <label class="option">
+              <input name="tshirt-colour" type="radio" value="black" />
               <span>Black</span>
             </label>
           </div>
         </fieldset>
 
         <div class="form-group">
-          <label for="tshirt-size">Choose a size</label>
-          <select id="tshirt-size" name="tshirt-size" required>
-            <option value="" selected disabled>Select a size</option>
-            <option value="XS">XS</option>
-            <option value="S">S</option>
-            <option value="M">M</option>
-            <option value="L">L</option>
-            <option value="XL">XL</option>
-            <option value="XXL">XXL</option>
-          </select>
+          <label>
+            Choose a size
+            <select name="tshirt-size" required>
+              <option value="" selected disabled>Select a size</option>
+              <option value="XS">XS</option>
+              <option value="S">S</option>
+              <option value="M">M</option>
+              <option value="L">L</option>
+              <option value="XL">XL</option>
+              <option value="XXL">XXL</option>
+            </select>
+          </label>
         </div>
 
         <button type="submit">Order now</button>