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-
15- < header >
16- < h1 > Product Pick</ h1 >
17- </ header >
18- < main >
19-
20- < form method = "get " class = "form-container ">
21- <!-- write your html here-->
22-
23- <!-- All inputs are required and are labelled for accessibility and have corresponding name, for, and id attributes -->
24- <!-- Asks for their forename name -->
25- < label for = "forename "> Forename:</ label >
26- < input type = "text " name = "forename " id ="forename " minlength ="2 " required >
27- < br >
28-
29- <!-- Asks for their surname -->
30- < label for = "surname "> Surname: </ label >
31- < input type = "text " name = "surname " id ="surname " minlength ="2 " required >
32- < br >
33-
34- <!-- Asks for their email -->
35- < label for = "email "> Email: </ label >
36- < input type = "email " name = "email " id ="email " required >
37- < br >
38-
39- <!-- Gives them the options to choose between 3 colours -->
40- < label for ="colour "> T-shirt Colour: </ label >
41- < select name = "colour " id = "colour " required >
42- < option value = "" selected disabled > Choose a colour</ option >
43- < option value = "white "> White</ option >
44- < option value = "black "> Black</ option >
45- < option value = "grey "> Grey</ option >
46- </ select >
47- < br >
48-
49- <!-- Gives them the option to choose between 6 sizes-->
50- < label for ="size "> T-shirt Size:</ label >
51- < select name = "size " id = "size " required >
52- < option value = "" selected disabled > Choose a size</ option >
53- < option value = "xs "> XS</ option >
54- < option value = "s "> S</ option >
55- < option value = "m "> M</ option >
56- < option value = "l "> L</ option >
57- < option value = "xl "> XL</ option >
58- < option value = "xxl "> XXL</ option >
59- </ select >
60- < br >
61-
62- <!-- Submit button -->
63- < button type ="submit "> Submit</ button >
64-
65- </ form >
66- </ main >
67-
68- < footer >
69- < p > By Muhammad-Burhan Mustafa</ p >
70- </ footer >
71-
72- </ body >
73- </ 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+ < link rel ="stylesheet " href ="style.css ">
10+ </ head >
11+
12+ < body >
13+ < header >
14+ < h1 > Product Pick</ h1 >
15+ </ header >
16+ < main >
17+ < form method ="get " class ="form-container ">
18+ <!-- write your html here -->
19+
20+ <!-- All inputs are required and are labelled for accessibility and have corresponding name, for, and id attributes -->
21+
22+ <!-- Asks for their forename name -->
23+ < label for ="forename "> Fullname:</ label >
24+ < input type ="text " name ="fullname " id ="fullname " minlength ="2 " required >
25+ < br >
26+
27+ <!-- Asks for their email -->
28+ < label for ="email "> Email:</ label >
29+ < input type ="email " name ="email " id ="email " required >
30+ < br >
31+
32+ <!-- Gives them the options to choose between 3 colours -->
33+ < label for ="colour "> T-shirt Colour:</ label >
34+ < select name ="colour " id ="colour " required >
35+ < option value ="" selected disabled > Choose a colour</ option >
36+ < option value ="white "> White</ option >
37+ < option value ="black "> Black</ option >
38+ < option value ="grey "> Grey</ option >
39+ </ select >
40+ < br >
41+
42+ <!-- Gives them the option to choose between 6 sizes -->
43+ < label for ="size "> T-shirt Size:</ label >
44+ < select name ="size " id ="size " required >
45+ < option value ="" selected disabled > Choose a size</ option >
46+ < option value ="xs "> XS</ option >
47+ < option value ="s "> S</ option >
48+ < option value ="m "> M</ option >
49+ < option value ="l "> L</ option >
50+ < option value ="xl "> XL</ option >
51+ < option value ="xxl "> XXL</ option >
52+ </ select >
53+ < br >
54+
55+ <!-- Submit button -->
56+ < button type ="submit "> Submit</ button >
57+ </ form >
58+ </ main >
59+ < footer >
60+ < p > By Muhammad-Burhan Mustafa</ p >
61+ </ footer >
62+ </ body >
63+ </ html >
0 commit comments