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