Manchester | 26-ITP-Sep | Rahana Suleiman | Sprint 1 | Form Controls #1508
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
|
|
@@ -17,11 +17,67 @@ <h1>Product Pick</h1> | |
| <!-- | ||
| try writing out the requirements first as comments | ||
| this will also help you fill in your PR message later--> | ||
|
|
||
| <!-- TODO1: Customer name --> | ||
| <div> | ||
| <label for="name">Full Name:</label> | ||
| <input | ||
| type="text" | ||
| name="name" | ||
| id="name" | ||
| placeholder="Enter Your Name" | ||
| required | ||
| pattern=".*\S.*\S.*" | ||
| /> | ||
| <br><br> | ||
|
Contributor
There was a problem hiding this comment. I can see you've used
If you are adding spacing between elements on a page, that's exactly what CSS is for. Shortcuts like this can seem useful but they run the risk of causing unexpected confusion for assistive technologies when used out of place! Note: styling is not required for this task. I'm not going to require you to change anything on this point, but bear in mind for future that you should avoid using |
||
| </div> | ||
|
|
||
| <!-- TODO2: Customer email --> | ||
| <div> | ||
| <label for="email">Enter Your Email:</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| placeholder="Email" | ||
| required | ||
| /> | ||
| <br><br> | ||
| </div> | ||
|
|
||
| <!-- TODO3: Colors to choose from --> | ||
| <div> | ||
| <label for="color">Color</label> | ||
| <select name="color" id="color" required> | ||
| <option value="">Please choose a color</option> | ||
| <option value="navy">Navy</option> | ||
| <option value="sage green">Sage Green</option> | ||
| <option value="charcoal">Charcoal</option> | ||
|
Comment on lines
+53
to
+55
Contributor
There was a problem hiding this comment. I love the creative choices of colours! 😄 |
||
| </select> | ||
| <br><br> | ||
| </div> | ||
|
|
||
| <!-- TODO4: Sizes to choose from --> | ||
| <div> | ||
| <label for="size">Choose a Size</label> | ||
| <select name="size" id="size" required> | ||
| <option value="">Select a size</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> | ||
| </div> | ||
|
|
||
| <button type="submit">Submit</button> | ||
| </form> | ||
| </main> | ||
| <footer> | ||
| <!-- change to your name--> | ||
| <p>By RAHANA SULEIMAN</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's good to write out your TODOs in comments as you're going along, but anything that is used as a tool for development can be removed once that development is done! Same applies to the other comments too 🙂