1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
33 < head >
44 < meta charset ="utf-8 " />
@@ -13,15 +13,58 @@ <h1>Product Pick</h1>
1313 </ header >
1414 < main >
1515 < form >
16- <!-- write your html here-->
17- <!--
18- try writing out the requirements first as comments
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+ <!--
1957 this will also help you fill in your PR message later-->
58+ <!--
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 -->
2063 </ form >
2164 </ main >
2265 < footer >
2366 <!-- change to your name-->
24- < p > By HOMEWORK SOLUTION </ p >
67+ < p > By Russom G </ p >
2568 </ footer >
2669 </ body >
2770</ html >
0 commit comments