1- <!doctype html>
1+ <!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- </ head >
11-
12- < body >
13- < header >
14- < h1 > Product Pick</ h1 >
15- </ header >
16- < main >
17- < form aria-label ="order form ">
18- < label for ="name "> name: </ label >
19- < input type ="text " name ="name " id ="name " minlength ="2 " maxlength ="100 " autocomplete ="name " pattern ="\S.*\S "
20- title ="name must contain at least two non-space characters. Must start and end with non-space character. "
21- aria-label ="enter your name " required />
22-
23- < label for ="email "> email: </ label >
24- < input type ="email " name ="email " id ="email " aria-label ="enter your email address " required />
25-
26- < label for ="shirt-color "> shirt color: </ label >
27- < select name ="shirt-color " id ="shirt-color " aria-label ="select shirt color " required >
28- < option value ="" disabled selected > Choose a color</ option >
29- < option value ="red "> red</ option >
30- < option value ="green "> green</ option >
31- < option value ="blue "> blue</ option >
32- </ select >
33- < select name ="shirt-size " id ="shirt-size " aria-label ="select shirt size " required >
34- < option value ="" disabled selected > Choose a size</ option >
35- < option value ="xs "> XS</ option >
36- < option value ="s "> S</ option >
37- < option value ="m "> M</ option >
38- < option value ="l "> L</ option >
39- < option value ="xl "> XL</ option >
40- < option value ="xxl "> XXL</ option >
41- </ select >
42- < button type ="submit " aria-label ="submit order ">
43- Check out
44- </ button >
45- </ form >
46- </ main >
47- < footer >
48- <!-- change to your name-->
49- < p > By Gideon Defar</ p >
50- </ footer >
51- </ body >
52-
53- </ 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+ < h2 > By HOMEWORK SOLUTION</ h2 >
25+ </ footer >
26+ </ body >
27+ </ html >
0 commit comments