London | 26-ITP-January | Eugenie Ahangama | Sprint 2 | Form Controls

Form-Controls/index.html

@@ -13,15 +13,86 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
+        <!-- Requirements-->
         <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        - Collect customer's name (min 2 characters)
+        - Collect customer's email (must be a valid)
+        - Choose 1 of 3 colours (shirt colour)
+        - Choose 1 of 6 sizes (shirt size)
+        - All fields required
+        - Semantic HTML only (no CSS or JS)
+          r-->
+
+          <!-- Customer Name -->
+          <label for="name">Full Name</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            minlength="2"
+            required
+          >
+
+          <!-- Customer Email -->
+          <label for ="email">Email Address</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+          >
+
+          <!-- Shirt Colour -->
+          <fieldset>
+            <legend>Choose a Colour</legend>
+
+            <label>
+            <input
+              type="radio"
+              name="colour"
+              value="red"
+              required> 
+              Red
+            </label>
+
+            <label>
+            <input
+              type="radio"
+              name="colour"
+              value="blue"
+              required>
+              Blue
+            </label>
+
+            <label>
+            <input
+              type="radio"
+              name="colour"
+              value="green"
+              required>
+              Green
+            </label>
+          </fieldset>
+
+          <!-- Shirt Size -->
+           <fieldset>
+            <legend>Choose a Size</legend>
+
+            <label><input type="radio" name="size" value="XS" required> XS</label>
+            <label><input type="radio" name="size" value="S" required> S</label>
+            <label><input type="radio" name="size" value="M" required> M</label>
+            <label><input type="radio" name="size" value="L" required> L</label>
+            <label><input type="radio" name="size" value="XL" required> XL</label>
+            <label><input type="radio" name="size" value="XXL" required> XXL</label>
+           </fieldset>
+
+           <! -- Submit Button -->
+          <button type="submit">Submit</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Eugenie Ahangama</h2>
     </footer>
   </body>
 </html>