|
8 | 8 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
9 | 9 | </head> |
10 | 10 | <body> |
| 11 | + <form> |
| 12 | + <!-- 1. Customer Name (At least 2 non-space characters using pattern regex) --> |
| 13 | + <div> |
| 14 | + <label for="name">Name:</label> |
| 15 | + <input |
| 16 | + type="text" |
| 17 | + id="name" |
| 18 | + name="name" |
| 19 | + pattern=".*\S.*\S.*" |
| 20 | + title="Name must contain at least two non-space characters." |
| 21 | + required |
| 22 | + > |
| 23 | + </div> |
| 24 | + <!-- 2. Customer Email --> |
| 25 | + <div> |
| 26 | + <label for="email">Email:</label> |
| 27 | + <input |
| 28 | + type="email" |
| 29 | + id="email" |
| 30 | + name="email" |
| 31 | + required |
| 32 | + > |
| 33 | + </div> |
| 34 | + <!-- 3. T-shirt Colour (3 options) --> |
| 35 | + <div> |
| 36 | + <label for="colour">T-shirt Colour:</label> |
| 37 | + <select id="colour" name="colour" required> |
| 38 | + <option value="" disabled selected>Select a colour</option> |
| 39 | + <option value="red">Red</option> |
| 40 | + <option value="blue">Blue</option> |
| 41 | + <option value="black">Black</option> |
| 42 | + </select> |
| 43 | + </div> |
| 44 | + <!-- 4. T-shirt Size (6 options: XS, S, M, L, XL, XXL) --> |
| 45 | + <div> |
| 46 | + <label for="size">T-shirt Size:</label> |
| 47 | + <select id="size" name="size" required> |
| 48 | + <option value="" disabled selected>Select a size</option> |
| 49 | + <option value="XS">XS</option> |
| 50 | + <option value="S">S</option> |
| 51 | + <option value="M">M</option> |
| 52 | + <option value="L">L</option> |
| 53 | + <option value="XL">XL</option> |
| 54 | + <option value="XXL">XXL</option> |
| 55 | + </select> |
| 56 | + </div> |
| 57 | + |
| 58 | + <!-- Submit Button --> |
| 59 | + <button type="submit">Submit Order</button> |
11 | 60 | <header> |
12 | 61 | <h1>Product Pick</h1> |
13 | 62 | </header> |
14 | 63 | <main> |
15 | | - <form> |
16 | 64 | <!-- write your html here--> |
17 | 65 | <!-- |
18 | 66 | try writing out the requirements first as comments |
19 | 67 | this will also help you fill in your PR message later--> |
20 | | - </form> |
21 | 68 | </main> |
22 | 69 | <footer> |
23 | 70 | <!-- change to your name--> |
|
0 commit comments