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- </ 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 >
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+ </ head >
11+
12+ < body >
13+ < header >
14+ < h1 > Product Pick</ h1 >
15+ </ header >
16+ < main >
17+ < form >
18+ <!-- write your html here-->
19+ <!--
20+ [x] My form is semantic HTML.
21+ [x] All inputs have associated labels.
22+ [] My Lighthouse Accessibility score is 100.
23+ [ ] I require a valid name.
24+ [ ] I require a valid email.
25+ [ ] I require one colour from a defined set of 3 colours.
26+ [ ] I require one size from a defined set of 6 sizes.
27+ -->
28+ < fieldset >
29+ < legend > Personal Information</ legend >
30+ < label for ="name "> Name:</ label >
31+ < input minlength ="3 " type ="text " id ="name " name ="name " pattern ="^(?!\s*$).{3,}$ "
32+ title ="Please enter at least 3 characters, not just spaces " required >
33+ < label for ="email "> Email:</ label >
34+ < input type ="email " id ="email " name ="email " title ="Please enter a valid email address " autocomplete ="email "
35+ required >
36+ </ fieldset >
37+ </ form >
38+ </ main >
39+ < footer >
40+ <!-- change to your name-->
41+ < p > By Tomislav Dukez</ p >
42+ </ footer >
43+ </ body >
44+
45+ </ html >
0 commit comments