Sheffield | 26-ITP-Jan | Daniel Aderibigbe | Sprint 2 | Form Controls

Form-Controls/index.html

@@ -13,15 +13,114 @@ <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-->
+        <fieldset>
+          <legend>Customer details</legend>
+
+          <label for="name">Name:</label>
+          <input
+            type="text"
+            id="name"
+            required
+            name="customerName"
+            minlength="2"
+          />
+          <br /><br />
+          <label for="email">Email:</label>
+          <input type="email" id="email" required name="customerEmail" />
+        </fieldset>
+
+        <br />
+        <fieldset>
+          <legend>T-Shirt Colour</legend>
+
+          <div>
+            <input
+              type="radio"
+              id="colourBlack"
+              name="tshirtColour"
+              value="black"
+              required
+            />
+            <label for="colourBlack">Black</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input
+              type="radio"
+              id="colourWhite"
+              name="tshirtColour"
+              value="white"
+            />
+            <label for="colourWhite">White</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input
+              type="radio"
+              id="colourBlue"
+              name="tshirtColour"
+              value="blue"
+            />
+            <label for="colourBlue">Blue</label>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>T-Shirt Size</legend>
+
+          <div>
+            <input type="radio" id="sizeXS" name="size" value="XS" required />
+            <label for="sizeXS">XS</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input type="radio" id="sizeS" name="size" value="S" required />
+            <label for="sizeS">S</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input type="radio" id="sizeM" name="size" value="M" required />
+            <label for="sizeM">M</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input type="radio" id="sizeL" name="size" value="L" required />
+            <label for="sizeL">L</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input type="radio" id="sizeXL" name="size" value="XL" required />
+            <label for="sizeXL">XL</label>
+          </div>
+
+          <br />
+
+          <div>
+            <input type="radio" id="sizeXXL" name="size" value="XXL" required />
+            <label for="sizeXXL">XXL</label>
+          </div>
+        </fieldset>
+
+        <br />
+
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Daniel Aderibigbe</h2>
     </footer>
   </body>
 </html>