1+ <!DOCTYPE html>
2+ < html lang ="en ">
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+ < fieldset >
20+ < legend > Name and Email address</ legend >
21+ <!--Adding <legend> element for accessibility purposes-->
22+ < label for ="name "> Name</ label >
23+ < input type ="text " id ="name " name ="name " minlength ="2 " pattern ="[a-zA-Z]+ "required > < br > < br >
24+ <!--Input field for name, making it required-->
25+ < label for ="email "> Email:</ label >
26+ < input type ="email " id ="email " required > < br > <!--Input field for email address. Making it required-->
27+ </ fieldset >
28+
29+
30+ < fieldset >
31+ < legend > Please select a colour for your T-Shirt</ legend >
32+ < label >
33+ < input type ="radio " name ="colour " required > Blue
34+ </ label >
35+ < label >
36+ < input type ="radio " name ="colour " required > Red
37+ </ label >
38+ < label >
39+ < input type ="radio " name ="colour " required > Green
40+ </ label > <!--Making radio buttons for Blue, Red and Green and making the require fields-->
41+ </ fieldset > < br >
42+ < fieldset >
43+ < legend > Please select a size for your T-Shirt</ legend >
44+ < label >
45+ <!--Making radio buttons for XS, S, M, L, XL and XXL sizes, and making them required fields-->
46+ < input type ="radio " name ="size " required > XS
47+ </ label >
48+ < label >
49+ < input type ="radio " name ="size " required > S
50+ </ label >
51+ < label >
52+ < input type ="radio " name ="size " required > M
53+ </ label >
54+ < label >
55+ < input type ="radio " name ="size " required > L
56+ </ label >
57+ < label >
58+ < input type ="radio " name ="size " required > XL
59+ </ label >
60+ < label >
61+ < input type ="radio " name ="size " required > XXL
62+ </ label >
63+ </ fieldset > < br >
64+ < div >
65+ < button > Submit</ button > <!--Submit button-->
66+ </ div >
67+ </ form >
68+ </ main >
69+ < footer >
70+ < p > By Vito Moratti</ p >
71+ </ footer >
72+ </ body >
73+
74+ </ html >
0 commit comments