|
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 | 6 | <title>My form exercise</title> |
7 | | - <meta name="description" content=""> |
8 | | - <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 7 | + <meta name="description" content="" /> |
| 8 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
9 | 9 | </head> |
10 | 10 | <body> |
11 | 11 | <header> |
12 | 12 | <h1>Product Pick</h1> |
13 | 13 | </header> |
14 | 14 | <main> |
15 | 15 | <form> |
16 | | - <div> |
17 | | - <label for="name"> Name:</label> |
18 | | - <input |
19 | | - type="text" |
20 | | - id="name" |
21 | | - name="name" |
22 | | - required |
23 | | - pattern="\S{2,}" |
24 | | - title="Please enter at least two non-space characters." |
25 | | - > |
26 | | - </div> |
27 | | - |
28 | | - <div> |
29 | | - <label for="email"> Email:</label> |
30 | | - <input type="email" id="email" name="email" required> |
31 | | - </div> |
32 | | - <div> |
33 | | - <label for="color"> Colour:</label> |
34 | | - <select id="color" name="color" required> |
35 | | - <option value="">Please select a colour</option> |
36 | | - <option value="red">Red</option> |
37 | | - <option value="blue">Blue</option> |
38 | | - <option value="green">Green</option> |
39 | | - </select> |
40 | | - </div> |
41 | | - <div> |
42 | | - <label for="size"> Size:</label> |
43 | | - <select id="size" name="size" required> |
44 | | - <option value="">Please select a size</option> |
45 | | - <option value="xs">XS</option> |
46 | | - <option value="s">S</option> |
47 | | - <option value="m">M</option> |
48 | | - <option value="l">L</option> |
49 | | - <option value="xl">XL</option> |
50 | | - <option value="xxl">XXL</option> |
51 | | - </select> |
52 | | - </div> |
53 | | - <div> |
54 | | - <button type="submit">Submit</button> |
55 | | - </div> |
56 | | - <!-- |
57 | | - this will also help you fill in your PR message later--> |
| 16 | + <!-- write your html here--> |
58 | 17 | <!-- |
59 | | - What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. |
60 | | - What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. |
61 | | - What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? |
62 | | - What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL --> |
| 18 | + try writing out the requirements first as comments |
| 19 | + this will also help you fill in your PR message later--> |
63 | 20 | </form> |
64 | 21 | </main> |
65 | 22 | <footer> |
|
0 commit comments