1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
33 < head >
44 < meta charset ="utf-8 " />
@@ -17,45 +17,58 @@ <h1>Product Pick</h1>
1717
1818 <!-- requirement: ask for customer's full name -->
1919 <!-- validation: name must be at least 2 characters -->
20- < p >
20+ < p >
2121 < label for ="name "> What’s your full name?</ label >
22- < input
23- type ="text "
24- id ="name "
25- name ="name "
26- required
27- minlength ="2 "
28- placeholder ="e.g. Abel T. Abelson "
22+ < input
23+ type ="text "
24+ id ="name "
25+ name ="name "
26+ required
27+ minlength ="2 "
28+ placeholder ="e.g. Abel T. Abelson "
2929 />
30- </ p >
31-
32-
30+ </ p >
3331
3432 <!-- requirement: ask for customer's email address -->
3533 <!-- validation: must match a valid email format -->
36- < p >
34+ < p >
3735 < label for ="email "> Your email address:</ label >
38- < input
39- type ="email "
40- id ="email "
41- name ="email "
42- required
36+ < input
37+ type ="email "
38+ id ="email "
39+ name ="email "
40+ required
4341 placeholder ="e.g. you@example.com "
4442 />
45- </ p >
43+ </ p >
4644
4745 <!-- requirement: customer must choose one t-shirt colour -->
4846 <!-- validation: limit choice to 3 fixed colour options -->
4947 < fieldset >
5048 < legend > Choose your t-shirt colour:</ legend >
51- < p > < label > < input type ="radio " name ="colour " value ="black " required /> Black</ label > </ p >
52- < p > < label > < input type ="radio " name ="colour " value ="white " /> White</ label > </ p >
53- < p > < label > < input type ="radio " name ="colour " value ="sage " /> Sage</ label > </ p >
49+ < p >
50+ < label >
51+ < input type ="radio " name ="colour " value ="black " required />
52+ Black
53+ </ label >
54+ </ p >
55+ < p >
56+ < label >
57+ < input type ="radio " name ="colour " value ="white " />
58+ White
59+ </ label >
60+ </ p >
61+ < p >
62+ < label >
63+ < input type ="radio " name ="colour " value ="sage " />
64+ Sage
65+ </ label >
66+ </ p >
5467 </ fieldset >
5568
5669 <!-- requirement: customer must select a t-shirt size -->
5770 <!-- validation: size must be one of 6 defined options -->
58- < p >
71+ < p >
5972 < label for ="size "> Select your size:</ label >
6073 < select id ="size " name ="size " required >
6174 < option value =""> -- Choose one --</ option >
@@ -69,7 +82,7 @@ <h1>Product Pick</h1>
6982
7083 <!-- requirement: a submit button must be present -->
7184 < button type ="submit "> Place Order</ button >
72- </ p >
85+ </ p >
7386 </ form >
7487 </ main >
7588 < footer >
0 commit comments