11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="utf-8 " />
5- < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
6- < title > My form exercise</ title >
7- < meta name ="description " content ="" />
8- < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
9- </ head >
10- < body >
11- < header >
12- < h1 > Pick product</ h1 >
13- </ header >
14- < main >
15- < form >
16- <!-- 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.-->
17- < div >
3+
4+ < head >
5+ < meta charset ="utf-8 " />
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
7+ < title > My form exercise</ title >
8+ < meta name ="description " content ="" />
9+ < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
10+ </ head >
11+
12+ < body >
13+ < header >
14+ < h1 > Pick product</ h1 >
15+ </ header >
16+ < main >
17+ < form >
18+ <!-- 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.-->
19+ < div >
1820 < label for ="name "> Name</ label >
1921 < input type ="text " id ="name " name ="name " placeholder ="Chandrmani Gaire " pattern =".*\S.*\S.* " required >
2022 </ div >
2123 < br >
2224 < div >
23- < label for ="email "> Email</ label >
25+ < label for ="email "> Email</ label >
2426 < input type ="email " name ="email " placeholder ="chandramani@gmail.com " id ="email " required >
2527 </ div >
2628 < br >
2729 <!--What color should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? -->
28- < div >
29- < label for ="color "> T-shirt color:</ label >
30- < select id ="color " name ="color " required >
31- < option value =""> Choose a color</ option >
32- < option value ="grey "> Grey</ option >
33- < option value ="red "> Red</ option >
34- < option value ="black "> Black</ option >
35- </ select >
36- </ div >
30+ < div >
31+ < label for ="color "> T-shirt color:</ label >
32+ < select id ="color " name ="color " required >
33+ < option value =""> Choose a color</ option >
34+ < option value ="grey "> Grey</ option >
35+ < option value ="red "> Red</ option >
36+ < option value ="black "> Black</ option >
37+ </ select >
38+ </ div >
3739 < br >
38-
40+
3941 <!--What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
40- < label for ="size "> What size do you want?</ label >
41- < select id ="size " name ="size " required >
42- < option value =""> -- Choose size --</ option >
43- < option value ="XS "> XS</ option >
44- < option value ="S "> S</ option >
45- < option value ="M "> M</ option >
46- < option value ="L "> L</ option >
47- < option value ="XL "> XL</ option >
48- < option value ="XXL "> XXL</ option >
49- </ select >
50- < br >
51- < div >
52- < input id ="submit " type ="submit ">
53- </ div >
54- < br >
42+ < label for ="size "> What size do you want?</ label >
43+ < select id ="size " name ="size " required >
44+ < option value =""> -- Choose 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+ < br >
5553 < div >
56- < input id ="reset " type ="reset ">
57- </ div >
58- </ form >
59- </ main >
60- < footer >
61- <!-- change to your name-->
62- < p > By Chandramani Gaire</ p >
63- </ footer >
64- </ body >
65- </ html >
54+ < input id ="submit " type ="submit ">
55+ </ div >
56+ < br >
57+ < div >
58+ < input id ="reset " type ="reset ">
59+ </ div >
60+ </ form >
61+ </ main >
62+ < footer >
63+ <!-- change to your name-->
64+ < p > By Chandramani Gaire</ p >
65+ </ footer >
66+ </ body >
67+
68+ </ html >
0 commit comments