1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
33 < head >
44 < meta charset ="utf-8 " />
@@ -13,24 +13,34 @@ <h1>Product Pick</h1>
1313 </ header >
1414 < main >
1515 < form >
16- <!--
17- collect name, email, tshirt colour, tshirt size-->
18- <!--Validation:
19- name at least two non space characters
20- Email valid format, follow expected pattern
21- colour - 3 options
22- size - 6 options, XS, S, M, L, XL, XXL-->
2316 < div >
2417 < label for ="name "> Name:</ label >
25- < input type ="text " id ="name " name ="name " required minlength ="2 "
26- pattern ="(\p{L}\p{M}*)+(['\- ](\p{L}\p{M}*)+)* ">
18+ < input
19+ type ="text "
20+ id ="name "
21+ name ="name "
22+ required
23+ minlength ="2 "
24+ pattern ="(\p{L}\p{M}*)+(['\- ](\p{L}\p{M}*)+)* "
25+ />
26+ <!--Regex. \p{L} Any unicode
27+ character considered a letter. \p{M}* 0 or more unicode character that
28+ could have accent. ()+ 1 or more of all of that.
29+ ['\- ] 1 space ' - character. (\p{L}\p{M}*)+)* then
30+ 0 or more of any letter again -->
2731 </ div >
28- < br >
32+ < br / >
2933 < div >
3034 < label for ="email "> Email:</ label >
31- < input type ="email " id ="email " name ="email " required placeholder ="abc@example.com ">
35+ < input
36+ type ="email "
37+ id ="email "
38+ name ="email "
39+ required
40+ placeholder ="abc@example.com "
41+ />
3242 </ div >
33- < br >
43+ < br / >
3444 < div >
3545 < label for ="colour "> Colour</ label >
3646 < select name ="colour " id ="colour " required >
@@ -40,7 +50,7 @@ <h1>Product Pick</h1>
4050 < option value ="green "> Green</ option >
4151 </ select >
4252 </ div >
43- < br >
53+ < br / >
4454 < div >
4555 < label for ="size "> Size</ label >
4656 < select name ="size " id ="size " required >
0 commit comments