1- <!doctype html>
1+ <!DOCTYPE html>
22< html lang ="en ">
33 < head >
4- < meta charset ="utf-8 ">
5- < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
4+ < meta charset ="utf-8 " / >
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " / >
66 < title > My form exercise</ title >
7- < link rel ="stylesheet " href ="styles.css " />
87 < meta name ="description " content ="" />
98 < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
109 </ head >
@@ -14,69 +13,15 @@ <h1>Product Pick</h1>
1413 </ header >
1514 < main >
1615 < form >
17-
18- < div >
19-
20- < label for ="name "> Name:</ label >
21- < input
22- type ="text "
23- id ="name "
24- name ="name "
25- required
26- pattern ="\S{2,} "
27- title ="Please enter at least two non-space characters. "
28- />
29- </ div >
30-
31- < div >
32- < label for ="email "> Email:</ label >
33- < input type ="email " id ="email " name ="email " required >
34- </ div >
35- < div >
36- < label for ="color "> Colour:</ label >
37- < select id ="color " name ="color " required >
38- < option value =""> Please select a colour</ option >
39- < option value ="red "> Red</ option >
40- < option value ="blue "> Blue</ option >
41- < option value ="green "> Green</ option >
42- </ select >
43- </ div >
44- < div >
45- < label for ="size "> Size:</ label >
46- < select id ="size " name ="size " required >
47- < option value =""> Please select a size</ option >
48- < option value ="xs "> XS</ option >
49- < option value ="s "> S</ option >
50- < option value ="m "> M</ option >
51- < option value ="l "> L</ option >
52- < option value ="xl "> XL</ option >
53- < option value ="xxl "> XXL</ option >
54- </ select >
55- </ div >
56- < div >
57- < button type ="submit "> Submit</ button >
58- </ div >
59- <!--
16+ <!-- write your html here-->
17+ <!--
18+ try writing out the requirements first as comments
6019 this will also help you fill in your PR message later-->
61- <!--
62- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
63- What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
64- What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
65- What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
6620 </ form >
6721 </ main >
6822 < footer >
6923 <!-- change to your name-->
70- < p > By Russom Gebremeskel</ p >
71- < p >
72- < a href ="https://jigsaw.w3.org/css-validator/check/referer ">
73- < img
74- style ="border: 0; width: 88px; height: 31px "
75- src ="https://jigsaw.w3.org/css-validator/images/vcss-blue "
76- alt ="Valid CSS! "
77- />
78- </ a >
79- </ p >
24+ < p > By HOMEWORK SOLUTION</ p >
8025 </ footer >
8126 </ body >
8227</ html >
0 commit comments