London | 26-ITP-Jan | Damian Dunkley | Sprint 2 | Form-Controls

Form-Controls/index.html

@@ -14,9 +14,49 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <!-- requirements, 
+        customer name, must have at least two characters
+        Customers email must have format text@text.text
+        Colour choice, must be one of red, blue or green
+        Size choice must be Xs, S, M, L, XL, XXL
+        -->
+
+        <div>
+            <!-- Name: at least 2 characters -->
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required pattern=".{2,}" title="Name must be at least 2 characters long">
+        </div>
+        <div>
+          <!-- Email: basic format text@text.text -->
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" title="Enter a valid email like user@example.com">
+        </div>
+<div>
+          <!-- Colour choice: red, blue, green -->
+          <label for="colour">Colour:</label>
+          <select id="colour" name="colour" required>
+            <option value="">Select a colour</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+          </select>
+        </div>
+        <div>
+          <!-- Size choice: XS, S, M, L, XL, XXL -->
+          <label for="size">Size:</label>
+          <select id="size" name="size" required>
+            <option value="">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>   
+</div>
+
+
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>