11<!DOCTYPE html>
22< html lang ="en ">
3+
34< head >
45 < meta charset ="UTF-8 ">
56 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > T-Shirt Order Form</ title >
7+ < title > Checking Form</ title >
8+ < style >
9+ body {
10+ font-family : Arial, sans-serif;
11+ background-color : # f4f4f4 ;
12+ display : flex;
13+ justify-content : center;
14+ align-items : center;
15+ height : 100vh ;
16+ margin : 0 ;
17+ }
18+
19+ .customer-form {
20+ background-color : # fff ;
21+ padding : 40px ;
22+ border-radius : 8px ;
23+ box-shadow : 0 0 10px rgba (0 , 0 , 0 , 0.1 );
24+ width : 300px ;
25+ }
26+
27+ .customer-form label {
28+ margin-bottom : 5px ;
29+ color : # 4c9764 ;
30+ }
31+
32+ .customer-form button {
33+ width : 100% ;
34+ padding : 10px ;
35+ background-color : # 007bff ;
36+ color : # fff ;
37+ border : none;
38+ border-radius : 4px ;
39+ cursor : pointer;
40+ font-size : 16px ;
41+ }
42+
43+ .custojmer-form button : hover {
44+ background-color : # 0056b3 ;
45+ }
46+ </ style >
747</ head >
48+
849< body >
9- < form >
50+ < form class ="customer-form ">
51+ < H1 > Checking Form:</ H1 >
52+
1053 < div >
11- < label for ="customer-name "> What is the customer's name?</ label >
12- < input id ="customer-name " name ="customer-name " type ="text " required pattern =".*\S.*\S.* " title ="Please enter at least two non-space characters. " />
54+ < label for ="customer-name "> Customer's name : </ label >
55+ < input id ="customer-name " name ="customer-name " type ="text " required pattern =".*\S.*\S.* "
56+ title ="Please enter at least two non-space characters. " />
57+
1358 </ div >
1459
1560 < div >
16- < label for ="customer-email "> What is the customer 's email? </ label >
61+ < label for ="customer-email "> Customer 's email : </ label >
1762 < input id ="customer-email " name ="customer-email " type ="email " required />
63+
1864 </ div >
1965
2066 < div >
21- < label for ="tshirt-colour "> What colour should this T-shirt be? </ label >
67+ < label for ="tshirt-colour "> T-shirt Color : </ label >
2268 < select id ="tshirt-colour " name ="tshirt-colour " required >
2369 < option value ="" disabled selected > Select a colour</ option >
2470 < option value ="red "> Red</ option >
2571 < option value ="blue "> Blue</ option >
2672 < option value ="black "> Black</ option >
2773 </ select >
74+
2875 </ div >
2976
3077 < div >
31- < label for ="tshirt-size "> What size does the customer want? </ label >
78+ < label for ="tshirt-size "> T-shirt size required : </ label >
3279 < select id ="tshirt-size " name ="tshirt-size " required >
3380 < option value ="" disabled selected > Select a size</ option >
3481 < option value ="XS "> XS</ option >
3885 < option value ="XL "> XL</ option >
3986 < option value ="XXL "> XXL</ option >
4087 </ select >
88+
4189 </ div >
4290
43- < button type ="submit "> Submit Order </ button >
91+ < button type ="submit "> Submit checking </ button >
4492 </ form >
4593</ body >
94+
4695</ html >
0 commit comments