|
1 | | -<!doctype html> |
| 1 | +<!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8" /> |
|
8 | 8 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
9 | 9 | </head> |
10 | 10 | <body> |
11 | | - <!-- <objectives> |
12 | | --[x] Interpret requirements and check against a list of criteria |
13 | | --[x] Write a valid form |
14 | | --[x] Test with Devtools |
15 | | --[x] Refactor using Devtools |
16 | | --[x] Use version control by committing often and pushing regularly to GitHub |
17 | | --[x] Develop the habit of writing clean, well-structured, and error-free code |
18 | | -{{<objectives>}}>--> |
19 | | - |
20 | | - <!-- |
21 | | - HTML |
22 | | -- [x] I have only used HTML and CSS. |
23 | | -- [x] I have not used any JavaScript. |
24 | | -- [x] My form is semantic HTML. |
25 | | -- [x] All inputs have associated labels. |
26 | | -- [x] My Lighthouse Accessibility score is 100. |
27 | | -- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ |
28 | | -- [x] My code is consistently formatted |
29 | | -- [x] My page content is free of typos and grammatical mistakes |
30 | | -- [x] I commit often and push regularly to GitHub |
31 | | ---> |
32 | 11 | <header> |
33 | 12 | <h1>Product Pick</h1> |
34 | 13 | </header> |
35 | 14 | <main> |
36 | 15 | <form> |
| 16 | + <!-- write your html here--> |
37 | 17 | <!-- |
38 | | - [x] Customers name = requires at least two non space characters. |
39 | | - [x] Customer email = requires a consistent pattern |
40 | | - [x] T-shirt color = required to choose from only 3 options! |
41 | | - [x] T-shirt size = required to choose from only 6 sizes! --> |
42 | | - <fieldset> |
43 | | - <legend>Customer Details</legend> |
44 | | - |
45 | | - <label for="name">Full name: </label> |
46 | | - <input id="name" name="name" required pattern=".*\S.*\S.*" /> |
47 | | - |
48 | | - <label for="email">E-mail: </label> |
49 | | - <input id="email" name="email" type="email" required /> |
50 | | - </fieldset> |
51 | | - <fieldset> |
52 | | - <legend>T-shirt Details</legend> |
53 | | - |
54 | | - <label for="t-shirt-colour">Please select a t-shirt colour:</label> |
55 | | - <select id="t-shirt-colour" name="colour" required> |
56 | | - <option value="">Colour</option> |
57 | | - <option>Burgundy</option> |
58 | | - <option>Forest Green</option> |
59 | | - <option>Ochre Yellow</option> |
60 | | - </select> |
61 | | - |
62 | | - <label for="t-shirt-size">Please select a size</label> |
63 | | - <select id="t-shirt-size" name="size" required> |
64 | | - <option value="">Size</option> |
65 | | - <option>XS</option> |
66 | | - <option>S</option> |
67 | | - <option>M</option> |
68 | | - <option>L</option> |
69 | | - <option>XL</option> |
70 | | - <option>XXL</option> |
71 | | - </select> |
72 | | - </fieldset> |
73 | | - |
74 | | - <button>Submit</button> |
| 18 | + try writing out the requirements first as comments |
| 19 | + this will also help you fill in your PR message later--> |
75 | 20 | </form> |
76 | 21 | </main> |
77 | 22 | <footer> |
78 | | - <p>By Mars Adesina</p> |
| 23 | + <!-- change to your name--> |
| 24 | + <p>By HOMEWORK SOLUTION</p> |
79 | 25 | </footer> |
80 | 26 | </body> |
81 | 27 | </html> |
0 commit comments