1- <!DOCTYPE html>
1+ <!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+ < link rel ="stylesheet " href ="style.css " />
10+ </ head >
311
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- < link rel ="stylesheet " href ="style.css " />
11- </ head >
12-
13- < body >
14- < header >
15- < h1 > Product Pick</ h1 >
16- </ header >
17- < main >
18- < form >
19- < div >
20- < label for ="full-name "> Name</ label >
21- < input type ="text " id ="full-name " name ="full-name " required minlength ="2 " pattern =".*\S.*\S.* "
22- title ="Please enter at least two nonspace characters ">
23- </ div >
24- < div >
25- < label for ="email "> Email</ label >
26- < input type ="email " id ="email " name ="email " required >
27- </ div >
28- < div class ="tshirt-colour ">
29- < legend > T-shirt Colour</ legend >
12+ < body >
13+ < header >
14+ < h1 > Product Pick</ h1 >
15+ </ header >
16+ < main >
17+ < form >
3018 < div >
31- < label >
32- < input type ="radio " name ="colour " value ="red " required > red
33- </ label >
19+ < label for ="full-name "> Name</ label >
20+ < input
21+ type ="text "
22+ id ="full-name "
23+ name ="full-name "
24+ required
25+ minlength ="2 "
26+ pattern =".*\S.*\S.* "
27+ title ="Please enter at least two nonspace characters "
28+ />
3429 </ div >
3530 < div >
36- < label >
37- < input type ="radio " name ="colour " value ="green " required > green
38- </ label >
31+ < label for ="email "> Email</ label >
32+ < input type ="email " id ="email " name ="email " required />
33+ </ div >
34+ < div class ="tshirt-colour ">
35+ < legend > T-shirt Colour</ legend >
36+ < div >
37+ < label >
38+ < input type ="radio " name ="colour " value ="red " required /> red
39+ </ label >
40+ </ div >
41+ < div >
42+ < label >
43+ < input type ="radio " name ="colour " value ="green " required /> green
44+ </ label >
45+ </ div >
46+ < div >
47+ < label >
48+ < input type ="radio " name ="colour " value ="blue " required /> blue
49+ </ label >
50+ </ div >
3951 </ div >
4052 < div >
41- < label >
42- < input type ="radio " name ="colour " value ="blue " required > blue
43- </ label >
53+ < label for ="size "> T-shirt Size</ label >
54+ < select id ="size " name ="size " required >
55+ < option value =""> Select size</ option >
56+ < option value ="xs "> XS</ option >
57+ < option value ="s "> S</ option >
58+ < option value ="m "> M</ option >
59+ < option value ="l "> L</ option >
60+ < option value ="xl "> XL</ option >
61+ < option value ="xxl "> XXL</ option >
62+ </ select >
4463 </ div >
45- </ div >
46- < div >
47- < label for ="size "> T-shirt Size</ label >
48- < select id ="size " name ="size " required >
49- < option value =""> Select size</ option >
50- < option value ="xs "> XS</ option >
51- < option value ="s "> S</ option >
52- < option value ="m "> M</ option >
53- < option value ="l "> L</ option >
54- < option value ="xl "> XL</ option >
55- < option value ="xxl "> XXL</ option >
56- </ select >
57- </ div >
58- < button type ="submit "> Confirm Order</ button >
59-
60- </ form >
61- </ main >
62- < footer >
63- < p > Carolina Maday Villa Huanca</ p >
64- </ footer >
65- </ body >
66-
67- </ html >
64+ < button type ="submit "> Confirm Order</ button >
65+ </ form >
66+ </ main >
67+ < footer >
68+ < p > Carolina Maday Villa Huanca</ p >
69+ </ footer >
70+ </ body >
71+ </ html >
0 commit comments