Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 2 | Form-Controls

Form-Controls/README.md

@@ -4,10 +4,10 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -30,18 +30,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 used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] 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] My form is semantic html.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [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.
 
 ## Resources
 

Form-Controls/index.html

@@ -14,14 +14,52 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- write your html here-->
+         <fieldset>
+          <legend>Personal Information</legend>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required minlength="2"/><br /><br />
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required /><br /><br />
+        </fieldset>
+        <fieldset>
+          <legend>Product Details</legend>
+          <p>Colour:</p>
+              <label for="red">
+                <input type="radio" id="red" name="Colour" value="Red" required/>
+                Red
+              </label>
+              <br><br>
+              <label for="blue">
+                <input type="radio" id="blue" name="Colour" value="Blue" />
+                Blue
+              </label>
+              <br><br>
+              <label for="green">
+                <input type="radio" id="green" name="Colour" value="Green" />
+                Green
+              </label>
+          <br><br>
+          <label for="size">Size:</label>
+          <select id="size" name="size" required>
+            <option value="">--Please choose an option--</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><br /><br />
+         </fieldset>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+        <br><br>
+        <button type="submit">Submit Order</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Mahammad Osman</h2>
     </footer>
   </body>
 </html>