11<!DOCTYPE html>
22< 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 > <!--adding final comment to test push and PR-->
66- </ div >
67- </ form >
68- </ main >
69- < footer >
70- < p > By Vito Moratti</ p >
71- </ footer >
72- </ body >
73-
74- </ html >
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+ </ head >
10+ < body >
11+ < header >
12+ < h1 > Product Pick</ h1 >
13+ </ header >
14+ < main >
15+ < form >
16+ <!-- write your html here-->
17+ <!--
18+ try writing out the requirements first as comments
19+ this will also help you fill in your PR message later-->
20+ </ form >
21+ </ main >
22+ < footer >
23+ <!-- change to your name-->
24+ < p > By HOMEWORK SOLUTION</ p >
25+ </ footer >
26+ </ body >
27+ </ html >
0 commit comments