London | 26-ITP-SEP | Sakiya Mayow | Sprint 1 | Form Controls

Form-Controls/README.md

@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
+- [x ] Interpret requirements and check against a list of criteria
+- [x ] Write a valid form
+- [] Test with Devtools
 - [ ] Refactor using Devtools
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [x] Use version control by committing often and pushing regularly to GitHub
+- [x] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -39,18 +39,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have only used HTML and CSS.
+- [x] I have only used HTML and CSS.
 - [ ] I have not used any JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic HTML.
-- [ ] All inputs have associated labels.
+- [x] My form is semantic HTML.
+- [x] All inputs have associated labels.
 - [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. 
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] I require a valid name. 
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 

Form-Controls/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,15 +13,51 @@ <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-->
+        <div>
+          <label for="fullname">Full name:</label>
+          <input
+            type="text"
+            id="fullname"
+            name="Fullname"
+            required
+            .*\S.*\S.*
+          />
+          <br />
+        </div>
+
+        <div>
+          <label for="email">Email:</label>
+          <input type="email" name="email" id="email" required />
+        </div>
+
+        <div>
+          <label for="T-shirt colour">Select one T-shirt colour:</label>
+          <select name="T-shirt-colour" id="T-shirt-colour" required>
+            <option value="">Choose one colour</option>
+            <option>Black</option>
+            <option>Navy blue</option>
+            <option>Grey</option>
+          </select>
+        </div>
+
+        <div>
+          <label for="T-shirt Size">Select one size:</label>
+          <select name="T-shirt-Size" id="T-shirt-Size" required>
+            <option value="">Choose one size</option>
+            <option>XS</option>
+            <option>S</option>
+            <option>M</option>
+            <option>L</option>
+            <option>XL</option>
+            <option>XXL</option>
+          </select>
+        </div>
+
+        <button type="Submit">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Sakiya Mayow</p>
     </footer>
   </body>
 </html>