London | 26-ITP-Jan | Ebrahim Moqbel | Sprint 2 | Form Controls

Form-Controls/index.html

@@ -12,16 +12,57 @@
       <h1>Product Pick</h1>
     </header>
     <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-->
+       <form>
+        <section>
+          <!-- customer name must be valid as a text and at least 2 char-->
+            <div>
+              <label for="name"> Name*: </label>
+              <input type="text" id="name" name="name" required minlength="2">
+            </div>
+             <!-- customer email must be valid in an email pattern-->
+            <div>
+              <label for="email">Email*:</label>
+              <input type="email" id="email" name="email" required>
+            </div>
+             <!-- provide three options for the T-shirts color,
+          make sure that they don't pick other colors-->
+            <fieldset>
+              <legend required>T-shirt Color</legend>
+              <div>
+                <label for="black">Black</label>
+                <input type="radio" id="black" name="T-shirtColor" value="black">
+              </div>
+              <div>
+                <label for="red">Red </label>
+                <input type="radio" id="red" name="T-shirtColor" value="red">
+              </div>
+              <div>
+                <label for="green">Green </label>
+                <input type="radio" id="green" name="T-shirtColor" value="green">
+              </div>
+            </fieldset>
+             <!-- provide 6 options XS, S, M, L, XL, XXL
+            for the customer to chose the color -->
+            <div>
+                <label for="T-shirtSize"></label>
+                <select name="T-shirtSize" id="T-shirtSize" required>
+                  <option value="XS">XS</option>
+                  <option label="S" value="S">S</option>
+                  <option label="M" value="M">M</option>
+                  <option label="L" value="L">L</option>
+                  <option label="XL" value="XL">XL</option>
+                  <option label="XXL" value="XXL">XXL</option>
+              </select>
+            </div>
+            <div>
+              <button type="submit">Place your order</button>
+            </div>
+        </section>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Ebraim Moqbel</h2>
     </footer>
   </body>
 </html>