West Midlands | ITP-September-2025 | Mustaf Asani | Sprint 2 | Form-Controls

Form-Controls/README.md

@@ -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

@@ -13,15 +13,50 @@ <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>Personal Information</legend>
+          <p>
+            <label for="firstname">Firstname:</label>
+            <div><input type="text" id="firstname" pattern=".*\S.*" title="firstname must not be only spaces" name="firstname" required minlength="2" />
+                <Label for="lastname">Lastname:</Label>
+                <input type="text" id="lastname" pattern=".*\S.*" title="lastname must not be only spaces" name="lastname" required minlength="2" />
+            </div>
+          </p>
+          <p>
+            <label for="email">Email:</label>
+            <div><input type="email" id="email" name="email" required /></div>
+          </p>
+          </fieldset>   
+          <fieldset>
+            <legend>Product Information</legend>
+            <p>
+              <label for="colour">Colour:</label>
+              <select id="colour" name="colour" required>
+                <option value="" disabled selected>Select a colour</option>
+                <option value="red">Red</option>
+                <option value="green">Green</option>
+                <option value="blue">Blue</option>
+              </select>
+            </p>
+            <p>
+              <label for="size">Size:</label>
+              <select id="size" name="size" required>
+                <option value="" disabled selected>Select a size</option>
+                <option value="xsmall">X-Small</option>
+                <option value="small">Small</option>
+                <option value="medium">Medium</option>
+                <option value="large">Large</option>
+                <option value="xlarge">X-Large</option>
+                <option value="xxlarge">XX-Large</option>
+              </select>
+            </p>
+          </fieldset>
+          <button type="submit">Submit</button> 
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Mustaf Asani</h2>
     </footer>
   </body>
 </html>