Use consistent kebab-case form field names

Author: BrianY315

Form-Controls/index.html

@@ -16,10 +16,10 @@ <h1>Product Pick</h1>
     <main>
       <form aria-label="T-shirt order form">
         <div class="form-group">
-          <label for="name">Name</label>
+          <label for="customer-name">Name</label>
           <input
-            id="name"
-            name="name"
+            id="customer-name"
+            name="customer-name"
             type="text"
             pattern=".*\S.*\S.*"
             title="Please enter at least two non-space characters."
@@ -28,10 +28,10 @@ <h1>Product Pick</h1>
         </div>
 
         <div class="form-group">
-          <label for="email">Email</label>
+          <label for="customer-email">Email</label>
           <input
-            id="email"
-            name="email"
+            id="customer-email"
+            name="customer-email"
             type="email"
             required
           />
@@ -40,26 +40,26 @@ <h1>Product Pick</h1>
         <fieldset class="form-group">
           <legend>Choose a colour</legend>
           <div class="radio-group">
-            <label class="option" for="colour-red">
-              <input id="colour-red" name="colour" type="radio" value="red" required />
+            <label class="option" for="tshirt-colour-red">
+              <input id="tshirt-colour-red" name="tshirt-colour" type="radio" value="red" required />
               <span>Red</span>
             </label>
 
-            <label class="option" for="colour-blue">
-              <input id="colour-blue" name="colour" type="radio" value="blue" />
+            <label class="option" for="tshirt-colour-blue">
+              <input id="tshirt-colour-blue" name="tshirt-colour" type="radio" value="blue" />
               <span>Blue</span>
             </label>
 
-            <label class="option" for="colour-black">
-              <input id="colour-black" name="colour" type="radio" value="black" />
+            <label class="option" for="tshirt-colour-black">
+              <input id="tshirt-colour-black" name="tshirt-colour" type="radio" value="black" />
               <span>Black</span>
             </label>
           </div>
         </fieldset>
 
         <div class="form-group">
-          <label for="size">Choose a size</label>
-          <select id="size" name="size" required>
+          <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>